DOM(Document Object Model)이란 무엇인가?

Javascript

DOM(Document Object Model)

DOM이란, 브라우저가 서버에게 요청하여, 응답으로 받은 웹 문서(HTML, XML, SVG 등)를 브라우저의 렌더링 엔진이 로드하고, 파싱하여 브라우저가 이해할 수 있는 형태로 구성된 것을 말한다. 이 DOM은 자바스크립트를 이용해 동적으로 변경이 가능하고, 이 변경된 DOM은 렌더링에 반영된다. 이때, 자바스크립트로 이 DOM에 접근하고 수정할 수 있는 DOM API가 있으며, 이 DOM API가 가지고 있는 프로퍼티와 메소드로 정적인 웹페이지에 접근하여 동적으로 변경할 수 있다.

DOM은 W3C의 공식 표준이고, HTML, JavaScript에서 정의한 표준이 아니다.


DOM의 기능

  • HTML 문서에 대한 모델 구성
    • 브라우저가 이해할 수 있는 형태로 HTML 문서를 모델로 구성하여 메모리에 생성하는데, 이때 모델은 객체의 트리로 구성된다.
  • HTML 문서 내의 각 요소에 접근 및 수정
    • 객체의 트리로 구성되어있는 모델 내의 각 객체에 접근 및 수정할 수 있는 프로퍼티와 메소드를 제공한다. 이때, DOM이 수정되면, 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.


DOM 구조

DOM 구조는 브라우저가 이해할 수 있는 형태로 HTML 문서를 모델로 구성하여 메모리에 생성하는데, 이때 모델은 객체의 트리로 구성되었다고 하여, DOM tree라고 부른다. DOM tree는 HTML 문서의 모든 요소와 요소의 attribute, text 등을 각각의 객체로 만들고, 이들 객체간에 관계를 부자 관계로 표현하는 tree(나무 가지)처럼 구성되어있다.


DOM 구조
출처: DOM 구조

위 구조를 코드로 작성하면 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <h1>Cryptocurrency</h1>
      <ul>
        <li id="one">Bitcoin</li>
        <li id="two">Bitcoin Cash</li>
        <li id="three">Ripple</li>
        <li id="four">Ethereum</li>
      </ul>
    </div>
  </body>
</html>


DOM tree 노드의 종류

DOM tree는 4 종류의 노드로 구성된다.

  • 문서 노드(Document Node)
  • 요소 노드(Element Node)
  • 어트리뷰트 노드(Attribute Node)
  • 텍스트 노드(Text Node)


문서 노드(Document Node)

Document Node란, DOM tree에 접근하기 위한 시작점(entry point)이다.
DOM tree의 최상위에 존재하고, DOM tree에 있는 요소, 어트리뷰트, 또는 텍스트 노드 등에 접근하기 위해서는 Document Node를 통해 접근해야 한다.

Document Node의 프로퍼티 및 메소드는 MDN에서 확인할 수 있다.


요소 노드(Element Node)

Element Node란, html, body, div 등 HTML 요소를 말한다. Element Node는 서로 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. Attribute Node 또는 Text Node에 접근하기 위해서는 먼저 Element Node에 접근해야 한다. 모든 Element Node는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.

Element Node의 프로퍼티 및 메소드는 MDN에서 확인할 수 있다.


어트리뷰트 노드(Attribute Node)

Attribute Node란, HTML 요소의 어트리뷰트로, HTML 요소의 자식이 아닌 일부이다.

Attribute Node의 프로퍼티 및 메소드는 MDN에서 확인할 수 있다.


텍스트 노드(Text Node)

Text Node란, 텍스트로 표현된 Element Node의 자식 요소이다. DOM tree의 최하단에 있는 Node로, Text Node는 자식 노드를 가질 수 없다.

Text Node의 프로퍼티 및 메소드는 MDN에서 확인할 수 있다.


DOM tree의 객체 구성

DOM tree의 객체 구성
출처: DOM tree의 객체 구성

DOM tree의 객체는 위 그림과 같이 구성되어 있다. 또한, 모든 Element Node는 HTMLElement 객체를 상속한 객체로 구성되어 있다.