soom 숨의 블로그 frontend developer

190126 TIL DOM

Jan 26, 2019 » 1막, TIL (Today I Learned)

AMAZON2 DOM 강의 정리

DOM 기본

HTML 최상위 element = DOM(document)

document.getElementById(“”)

document.getElementById(“”).id

document.getElementById(“”).className

document.getElementById(“”).style.display = “none”

document.querySelector(“”)

document.querySelector(“div”) <- 첫번째 div를 찾아줌

—css selector—-

document.querySelector(“#id”) <- #을 붙여야 id 찾아줌

document.querySelector(“.class”) <- .을 붙여야 class 찾아줌

document.querySelector(“.nav-line-2 > .nav-arrow”) <- 바로 아래 자식 찾아줌

DOM node

  1. node 탐색 방법
<html>
    <head></head>
    <body>
        
        <div>
            <ul>
                <li class"first-list">item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul>
        </div>
    </body>
</html>

var elDiv = document.querySelector("div")

elDiv.firstChild 하면 ul 이 나올것 같지만 #text (공백)이 나옴. 공백도 노드로 보는 것

elDiv.childNodes 하면 [ul, text]나옴(모든 자식 노드 찾을때) but 자식의 자식노드를 찾을 수는 없음!

elDiv.firstElementChild 하면 child 중의 첫 번째 element node 알려줌(공백 제외)

var fisrtLI = document.querySelector("ul > li") <-첫번째 li

firstLI.firtChild 하면 item1 나옴

firstLI.nextSibling 하면 #text

firstLI.nextElementSibling 해야 item2 li 나옴

  1. nodeType의 이해
<html>
    <head></head>
    <body>
        <div>
            this is div
        </div>
    </body>
</html>

document.body.tagName // “BODY”

var body = document.querySelector("body");

body.nodeType // 1

var div = document.querySelector("body > div");

div.nodeType //1

body.firstChild.nodeType; // 3

Constant Value Description
Node.ELEMENT_NODE 1 An Element node such as ](https://developer.mozilla.org/ko/docs/Web/HTML/Element/p) or [.
Node.TEXT_NODE 3 The actual Text of Element or Attr.

var divChild = div.firstChild; <- div 의 첫번째 자식

divChild.textContent;// ‘this is div’

divChild.nodetype; // 3

  1. node 생성과 추가

    1) 다양한 APIs

    document. 으로 사용할 수 있는 APIs
    https://www.w3schools.com/jsref/dom_obj_document.asp
    element. 으로 사용할 수 있는 APIs
    https://www.w3schools.com/jsref/dom_obj_all.asp

    2) DOM 탐색 APIs

    • 몇가지 유용한 속성 tagName textContent nodeType
    • 이동 childNodes firstChild <-공백/ text도 노드로 인정 firstElementChild parentElement nextSibling nextElementSibling

    3) DOM 조작 API

    • 삭제,추가,이동,교체를 위해서는 아래 API사용법을 잘 익혀두면 좋다

    ​ removeChild() ​ appendChild() ​ insertBefore() ​ cloneNode() ​ replaceChild() ​ closest() //상위로 올라가면서 근접 엘리먼트 찾기

  • 크롬에서 선택한 element는 $0으로 접근 가능 !

    <표준 방법=""> var div = document.createElement("div"); var str = document.createTextNode("오늘 하루 ... "); div.appendChild("str"); $0.appendChild(div);

​ 요즘 리액트, 앵귤러에서는 템플릿 사용하여 함 ..

실습

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>selector test</h1>
  
  <ul>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>

</body>
</html>

실습1
지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가해보기. 추가 된 이후에는 다시 삭제해보기. 

--추가--
var el = document.querySelector('ul');
var elLI = document.createElement('li');
el.appendChild(elLI);
elLI.innerHTML = 'milk';


--삭제--
el.removeChild(elLI);

실습2
insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하기

var parentElement = document.querySelector('ul');
var banana = parentElement.firstElementChild.nextElementSibling.nextElementSibling;
var newElement = document.createElement("li");
parentElement.insertBefore(newElement, banana);
newElement.innerHTML = 'milk'

실습3
실습2를 insertAdjacentHTML메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하기

var ul = document.querySelector('ul');
var el = ul.firstElementChild.nextElementSibling;
el.insertAdjacentHTML('afterend', '<li>milk</li>');


실습4
apple을 grape 와 strawberry 사이로 옮기기

var ul = document.querySelector('ul');
var apple = ul.firstElementChild;
ul.removeChild(apple);
var newLI = document.createElement('li');
ul.appendChild(newLI).innerHTML = "apple";

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>selector test</h1>
  
  <ul>
    <li class="red">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>

</body>
</html>

실습5
class 가 'red'인 노드만 삭제.

while (document.getElementsByClassName('red')[0]) {
        document.getElementsByClassName('red')[0].remove();
    }

// 잘 모르겠어서 계속 해보다가 찾아봄 ㅠ 
// https://stackoverflow.com/questions/4777077/removing-elements-by-class-name


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>selector test</h1>
  
    
<section>
  <h2> red section </h2>
  <ul>
    <li class="red">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>
</section>
  
  <Br>
  
<section>
  <h2> blue section </h2>
  <ul>
    <li class="green blue">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>
</section>

</body>
</html>

실습6
section 태그의 자손 중에 blue라는 클래스를 가지고 있는 노드가 있다면, 그 하위에 있는 h2 노드를 삭제.

var ul = document.getElementsByTagName('ul')

for (let i = 0; i < ul.length; i++){
	let node = ul[i].childNodes;
    for (let j = 0; j < node.length; j++){
		if(!node[j].classList) continue;
		else if(node[j].classList.contains('blue')){
			let parentSection = node[j].parentNode.parentNode;
			let firstChild = parentSection.firstElementChild;
			parentSection.removeChild(firstChild)
        }
	}	
}

풀이영상