DOM(Document Object Model)
- DOM은노드 객체들로 구성된 트리(부모-자식의 형태) 자료구조
- HTML, XML문서의 프로그래밍 인터페이스로, 문서(document)의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공한다.
- DOM은 구조화된 node, property, method를 갖고 있는 객체들로 문서를 표현한다.
- 간단한 DOM계층 구조
- document 노드 : 최상위 노드로, HTML전체를 가리킨다. window객체에 바인딩되며, script가 여러 개 존재해도 하나의 HTML문서에는 하나의 document만 존재한다.
- element 노드 : HTML element를 가리킨다.
- attribute 노드 : HTML element의 요소를 가리킨다. attribute노드는 부모 노드가 없으므로, element 노드와 형제 관계는 아니다.
- text 노드 : element 노드의 자식 노드이며, 말단 노드이다.(leaf node) HTML element의 텍스트를 가리킨다.
querySelector
- CSS 셀렉터를 이용한 element 취득
- 여러 개를 선택하고 싶은 경우 querySelectorAll 메소드를 사용. 유사 배열인 NodeList를 반환한다.
HTML
<div class="class1 class2">element1</div>
<div class="class1 class2">element2</div>
<div class="class1 class2">element3</div>JS
//클래스가 'class1'이면서 'class2'인 요소들 선택
let getClass = document.querySelectorAll(".class1.class2");
getClass.forEach(element => console.log(element.textContent));- querySelectorAll가 반환하는 NodeList는 요소를 수정해도 실시간으로 상태가 변하지 않는 객체이지만, childNodes가 반환하는 NodeList는 실시간으로 상태가 변하는 객체이다.
CSS
.green {
color: lightgreen;
}JS
//실시간으로 상태가 변하는 HTMLCollection의 경우
let getClass = document.getElementsByClassName('class1');
//선택한 요소의 클래스 속성을 'green'으로 변경
//첫 번째 루프를 돌면서 첫 번째 div의 클래스 속성은 'green'으로 변화하기 때문에
//HTMLCollection 객체도 변화, 3개였던 요소가 2개가 되고, 인덱스를 조회할 때 변화가 생긴다.
for(let i = 0; i < getClass.length; i++){
getClass[i].className = 'green';
}
JS
//NodeList의 경우
let getClass = document.querySelectorAll(".class1.class2");
//선택한 요소의 클래스 속성을 'green'으로 변경
for(let i = 0; i < getClass.length; i++){
getClass[i].className = 'green';
}
JS
//부모 노드의 childNodes프로퍼티를 사용한 경우
let parentClass = document.getElementsByClassName("eleParent")[0];
//NodeList반환
let getClass = parentClass.childNodes;
console.log(getClass); //NodeList(7) [text, div.class1.class2, text, div.class1.class2, text, div.class1.class2, text]
//해당 요소의 자식 노드를 삭제
for(let i = 0; i < getClass.length; i++){
parentClass.removeChild(getClass[i]);
}
// 짝수 번째 요소만 제거되었다.
console.log(getClass); //NodeList(3) [div.class1.class2, div.class1.class2, div.class1.class2]
- 위와 같이 NodeList도 실시간으로 변할 수 있기 때문에 spread를 사용해 배열로 변환 후 사용하는 방법이 있다.
JS
//부모 노드의 childNodes프로퍼티
let parentClass = document.getElementsByClassName("eleParent")[0];
//배열로 변환
let getClass = [...parentClass.childNodes];
console.log(getClass); //(7) [text, div.class1.class2, text, div.class1.class2, text, div.class1.class2, text]
//해당 요소의 자식 노드를 삭제
for(let i = 0; i < getClass.length; i++){
parentClass.removeChild(getClass[i]);
}
//배열은 그대로이지만, 자식 노드들은 제거돼서 더이상 보이지 않는다.
console.log(getClass); //(7) [text, div.class1.class2, text, div.class1.class2, text, div.class1.class2, text]
console.log(parentClass.childNodes); //NodeList []- getElementsBy~ 보다 느리지만, 여러 조건을 걸 수 있기 때문에, 유일한 attribute인 id를 제외하고는 CSS셀렉터를 사용하는 querySelector을 사용하는 것이 좋다고 한다.
출처
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
이웅모, 모던 자바스크립트 Deep Dive(2021)
