1.DOM Tree
- HMTL/XML 문서의 내용(콘텐츠)를 나타내는 트리 중 한가지
- 모든 엘리먼트는 HTMLElement의 자식으로 프로퍼티를 동일하게 갖고 있다.
- HTMLElement는 Element의 자식이고, Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.
그림출처:The Document Object Model
2.DOM 노드 타입
- 태그(Tag)는 요소 노드가 되며 트리 구조를 형성한다.
- 문자는 텍스트(Text) 노드가 된다.
- 이 외 HTML 냬 모든 것은 DOM을 구성한다.(주석 포함)
null이란 존재하지 않음을 의미 = 해당 노드가 없음
3.DOM 탐색
1) 트리 상단 노드 - documentElement와 body
- document가 제공하는 프로퍼티로 접근 가능
html:document.documentElementbody:document.bodyhead:document.head
2) 자식 노드 탐색
- 자식노드(child node, children) : 부모 노드의 바로 아래에서 중첩 관계를 만드는 자식 요소
- 후손 노드(descendants) : 중첩 관계에 있는 모든 요소 의미
- 형제 노드(sibling) : 같은 부모를 가진 노드
- nextSibling : 다음(우측right) 형제 노드
- previousSibling : 이전(좌측left) 형제 노드
// <body>의 부모 노드는 <html>입니다
alert( document.body.parentNode === document.documentElement ); // true
// <head>의 다음 형제 노드는 <body>입니다.
alert( document.head.nextSibling ); // HTMLBodyElement
// <body>의 이전 형제 노드는 <head>입니다.
alert( document.body.previousSibling ); // HTMLHeadElement-
firstChild와lastChild속성을 이용하여 첫번째 또는 마지막 자식 노드에 빠르게 접근 가능 = 단축키 같은 역할 -
element.hasChildNodes()로 존재 여부 검사 가능 -
childNodes는 컬렉션(유사배열객체)로for...of를 사용할 수 있다.
for (let node of document.body.childNodes) {
document.write(node); // 컬렉션 내의 모든 노드를 보여줍니다.
}그외 참조
차곡차곡 쌓아가는 나의 개발 기록