DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데, 이들을 각각 노드(node)라고 합니다. 그리고 DOM 트리의 가장 꼭대기(최상위)에 있는 노드를 루트 노드(root node)라고 합니다. document는 노드가 아니라 객체이므로 여기서는 html이 루트 노드가 됩니다.
그리고 각 노드는 부모, 자식, 형제 관계가 형성됩니다. 예를 들어, html 노드는 head 노드와 body 노드의 부모 노드입니다. head 노드와 body 노드는 같은 레벨(level)에 있으므로 형제 노드이며, html 노드의 자식 노드입니다.
Note 줄 바꿈하지 않은 예제 코드를 사용한 이유
DOM 생성을 보여 주기 위한 예제 코드로 지금까지와는 다르게 줄 바꿈되지 않아서 보기 불편한 HTML 코드를 사용했습니다. 원래는 다음 코드처럼 줄 바꿈과 들여쓰기를 확실히 해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model</title>
</head>
<body>
<h1>header</h1>
<a href="#">link</a>
</body>
</html>
그러나 DOM을 생성할 때는 Enter 때문에 생긴 공백이 노드로 생성되어서 오히려 DOM을 이해하기 더 어렵게 합니다.