DOM(Document Object Model)

DOM이란?

문서 객체 모델 DOM은 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface다.

 

DOM은 문서의 구조화된 표현을 제공하며 프로그래밍언어(흔히 자바스크립트)가 DOM 구조에 접근할 수 있는 방법을 제공한다.

 

렌더링 엔진이 텍스트 파일로 이뤄진 문서를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 사용하는 구조 모델을 DOM이라 한다.

DOM트리란?

브라우저가 웹서버로부터 받은 정보는 복잡하게 섞여있다. 렌더링 엔진은 이것을 브라우저가 쉽게 이해하기 위해 정리한다.

 

그 과정에서 모든 요소, 요소의 어트리뷰터(속성), 텍스트를 각각의 개체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM 트리다.

DOM트리의 구성

DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다.

 

요소의 중첩 관계는 객체의 트리로 구조화하여 부자 관계를 표현한다.

 

DOM 트리의 진입점(entry point)은 Document 객체이며, 최종점은 요소의 텍스트를 나타내는 객체다.

 

즉 DOM 트리는 프로그래머가 작성한 HTML 문서를 해석하여 컴퓨터가 이해하기 쉽게 HTML 문서 내용을 구조화(상하위 관계로)하는 것이라 생각하면 쉽다.

 

DOM 트리는 네 종류의 노드로 구성된다.

 

1. 문서 노드(Document Node)

트리의 최상위에 존재한다.

 

요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.

 

일종의 시작점(entry point)의 역할을 한다.

2. 요소 노드(Document Node)

HTML 요소(태그)를 표현한다.

 

HTML 요소는 중첩에 의해 부자 관계를 가지며, 이 부자 관례를 통해 정보를 구조화한다.

 

따라서 요소 노드는 문서의 구조를 서술한다고 말할 수 있다.

 

어트리뷰트, 텍스트 노드에 접근하려면 요소 노드를 찾아 접근해야 한다.

 

모든 요소 노드는 요소별 특징을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.

3. 어트리뷰트 노드(Document Node)

어트리뷰터(속성) 노드는 HTML 요소의 어트리뷰트를 표현한다.

 

어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다.

 

해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

4. 텍스트 노드(Document Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다.

 

텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다.

 

즉 텍스트 노드는 DOM 트리의 최종점이다.