노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 제공한다. 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여준다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 내려간다.
노드 종류
- 문서 노드(document node) : 문서 전체를 나타내는 노드
- 요소 노드(element node) : HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
- 속성 노드(attribute node) : HTML 요소의 속성은 속성 노드, 요소 노드에 관한 정보
- 텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드
- 주석 노드 (comment node) : HTML 문서의 모든 주석은 주석 노드
계층 이동
1) parentElement
현재 노드의 부모 노드를 반환해줌
const firtsChild = document.querySelector('b')
firstChild.parentElement- b 태그의 부모 노드를 반환함
2) children
현재 노드의 자식 노드들을 반환해줌
const parentNode = document.querySelector('div');
parentNode.children- div 태그의 자식 노드들을 반환함
3) nextSibling , previousSibling
nextSibling은 현재 노드의 형제 요소를 반환해주고 previousSiblings는 현재 노드의 이전 형제 요소를 반환해준다.
<html>
<div id="a"></div>
nextSibling테스트
<div id="b"></div>
</html>
var aDiv = document.getElementById("a");
console.log(aDiv.nextSibling); //nextSibling테스트4) nextElementSibling, previousElementSibling
nextElementSibling과 previousElementSibiling의 차이점은 무엇일까?
<html>
<div id="a"></div>
nextSibling테스트
<div id="b"></div>
</html>
var aDiv = document.getElementById("a");
console.log(aDiv.nextSibling); //nextSibling테스트
console.log(aDiv.nextElementSilbing) //<div id="b"></div>nextSibling을 실행하면 다음과 같이 다음 형제 요소인 텍스트 노드가 나오게 된다. 그러나 nextElementSibling을 실행하게 되면 다음 HTML 요소가 나오게 된다.
