브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 트리 자료구조를 생성합니다. DOM은 HTML, XML 문서의 계층적 구조와 정보를 표현하며 이를 프로그래밍 언어가 제어할 수 있는 DOM API를 제공합니다.
DOM은 node와 object로 문서를 표현하며, 이들은 웹 페이지를 프로그래밍 언어에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 또한, DOM은 웹 페이지의 객체 지향 표현입니다.
지금부터 DOM에 대해 알아보도록 하겠습니다.
1. 노드
HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미하며 이는 렌더링 엔진에 의해 파싱 되어 DOM을 구성하는 요소 노드 객체로 변환됩니다. HTML 문서는 HTML 요소들로 구성되며 HTML 요소는 중첩 관계를 가질 수 있습니다.
DOM은 노드 객체의 계층적인 구조로 구성되며, 노드 객체는 12개의 종류로 상속 구조를 갖습니다. 이 중 대표적인 노드 객체는 4가지로 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 존재합니다.
- 문서 노드: DOM 트리의 최상단에 위치하며 루트 노드로서 document 객체를 가리킵니다. document 객체는 HTML 문서를 가리킵니다.
- 요소 노드: HTML 요소를 가리키는 객체로 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 정보를 구조화합니다.
- 어트리뷰트 노드: HTML 요소의 어트리뷰트를 가리키며 어트리뷰트가 지정된 요소 노드와 연결되어 있습니다. 어트리뷰트 접근이 필요한 경우 요소 노드에 접근하여야 합니다.
- 텍스트 노드: HTML 요소의 텍스트를 가리키는 객체로 문서의 정보를 표현합니다. 요소 노드의 자식 노드이며, 텍스트 노드는 자식 노드를 가질 수 없습니다.
노드 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체가 아닌 브라우저 환경에 추가적으로 제공되는 호스트 객체이지만, 노드 객체도 자바스크립트의 객체이므로 프로토타입에 의한 상속 구조를 가집니다.
노드 객체는 노드 종류에 상관없이 모든 노드 객체가 공통으로 갖는 기능도 있으며, 노드 종류에 따른 기능도 있습니다. 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에 위치하며, 개별적인 기능은 프로토타입 체인의 하위에 위치합니다. 따라서, DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 노드 객체의 종류에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공합니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 39_DOM(p.677 - 684)