DOM(Document Object Model)이란?

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

<aside>

즉, DOM은 HTML 문서를 트리 구조로 표현해서, 자바스크립트로 그 내용을 읽고 바꾸고 제어할 수 있게 해주는 도구이다.

</aside>

39.1 노드

39.1.1 HTML 요소와 노드 객체

<aside>

HTML 요소 : HTML 문서를 구성하는 개별적인 요소를 의미한다. </aside>

<aside>

html 요소의 구조

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

<aside>

html 요소와 노드 객체

HTML 요소의 콘텐츠 영역에는 텍스트 뿐만 아니라 다른 HTML 요소도 포함할 수 있다.
이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계과 형성된다.
이러한 부자관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성한다. </aside>

트리 자료구조

<aside>

노드들의 계층 구조로 이뤄진다.
부모 노느와 자식 노드로 구성되어 최상위 노드에서 시작한다.
최상위 노드(=루트 노드)는 부모 노드가 없다.
루트 노드는 0개 이상의 자식 노드를 갖는다.
자식 노드가 없는 노드를 리프 노드라 한다. </aside>

39.1.2 노드 객체의 타입

// HTML 문서를 렌더링 엔진이 파싱한다고 가정
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"
  </head>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

<aside>

렌더링 엔진은 위 HTML 문서를 파싱하여 다음과 같이 DOM을 생성한다.

</aside>

<aside>

DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류가 있다. 이 중에서 중요한 노드 타입 4가지를 알아보자. (나머지는 39.6.4절에서 살펴보자)

</aside>

1. 문서노드

<aside>

DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.
document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩되어 있다. 따라서 문서 노드는 window.document 또는 document로 참조할 수 있다.
document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다.
즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야한다. </aside>

2. 요소 노드

<aside>

html 요소를 가리키는 객체
html 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다.
요소 노드는 문서의 구조를 표현한다고 할 수 있다. </aside>

3. 어트리뷰트 노드

<aside>

HTML 요소의 어트리뷰트 노드를 가리키는 객체
어튜리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다.
요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 요소 노드에만 연결되어 있다.
즉, 부모 노드가 없으므로 요소 노드의 형제 노드는 아니다.
따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다. </aside>