12.1.2 노드 타입 살펴보기
DOM 트리는 HTML 문서를 기반으로 생성되고, HTML 문서의 각 구성 요소는 DOM 트리에서 노드가 된다고 했습니다. 하지만 모든 노드가 똑같은 타입으로 생성되는 건 아닙니다.
HTML 문법에서도 태그, 속성, 주석이 있는 것처럼 노드도 HTML 구성 요소에 따라 서로 다른 타입이 됩니다. 그래서 그림 12-2에서 노드 타입이 다르다는 것을 보여 주려고 임의로 노드마다 색을 다르게 표시했습니다.
자바스크립트는 노드 종류를 총 9가지로 나누고 있지만, 현대적인 DOM 트리를 기준으로 하면 5가지 노드 타입만 알고 있으면 됩니다.
표 12-1 주요 노드 타입
|
타입 |
설명 |
|
문서 노드(Node.DOCUMENT_NODE) |
최상위 document 객체의 노드 타입 |
|
요소 노드(Node.ELEMENT_NODE) |
h1, p 태그와 같은 요소의 노드 타입 |
|
속성 노드(Node.ATTRIBUTE_NODE) |
href, src와 같은 속성의 노드 타입 |
|
텍스트 노드(Node.TEXT_NODE) |
텍스트에 해당하는 노드 타입 |
|
주석 노드(Node.COMMENT_NODE) |
주석에 해당하는 노드 타입 |
표를 보면 전부 HTML 문법으로 작성할 수 있는 구성 요소의 타입임을 알 수 있습니다. 문서 객체 모델은 CSS를 포함하지 않기 때문에 CSS와 관련 있는 노드 타입은 없습니다.
TIP | 자바스크립트에서 정한 노드 타입은 표에 나온 5가지 외에도 4가지가 더 있습니다. 이들은 과거에는 사용했지만, HTML5 기반의 문서에서는 더 이상 사용하지 않습니다. 그래서 반드시 알 필요는 없습니다. 나머지 노드 타입은 https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType 페이지에서 확인할 수 있습니다.