노드

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.

HTML 요소와 노드 객체

• HTML 요소(HTML element) : HTML 문서를 구성하는 개별적인 요소

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTMl 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.

HTML 문서는 HTML 요소의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자(parent-child) 관계가 형성된다. 이러한 부자 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성한다.

• 트리 자료구조(tree data structure) : 부모 노드(parent node)와 자식 노드(child node)로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조를 말한다. 하나의 최상위 노드에서 시작하고 이 최상위 노드는 부모 노드가 없으며, 루트 노드(root node)라 한다. 루트 노드는 0개 이상의 자식 노드를 가지며 자식 노드가 없는 노드를 리프 노드(leaf node)라 한다.
• 비선형 자료구조 : 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조

이 노드 객체들로 구성된 트리 자료구조를 DOM(Document Object Model)이라 한다. 노드 객체의 트리로 구조화 되어 있기 때문에 DOM을 DOM 트리라고 부르기도 한다.

노드 객체의 타입

노드 객체는 총 12개의 종류(노드 타입)가 있고 상속 구조를 갖는다. 그 중 중요한 4가지는 다음과 같다.

• 문서 노드 (document node) : DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. 따라서 DOM 트리의 노드들에 접근하기 위한 진입점(entry point) 역할을 담당하기에 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 이 document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩되어 있다. 따라서 문서 노드는 window.document 또는 document로 참조할 수 있다. 브라우저 환경의 모든 자바스크립트 코드는 script 태그에 분리되어 있어도 하나의 전역 객체 window를 공유하기 때문에 HTML 문서당 document 객체는 유일하다.

• 요소 노드 (element node) : HTML 요소를 가리키는 객체다. 이는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

• 어트리뷰트 노드 (attribute node) : HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다. 단, 요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있다. 즉, 부모 노드가 없기 때문에 형제(sibling)노드는 아니므로 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.

• 텍스트 노드 (text node) : HTML 요소의 텍스트를 가리키는 객체다. 문서의 정보를 표현한다고 할 수 있다. 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드(leaf node)다. 즉, 이는 DOM 트리의 최종단이므로 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.

이 외에도 주석을 위한 Comment 노드, DOCTYPE을 위한 DocumentType 노드, 복수의 노드를 생성하여 추가할 때 사용하는 DocumentFragment 노드 등 총 12개의 노드 타입이 있다.

---

출처 : 모던 자바스크립트 Deep Dive