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

39.1 노드

39.1.1 HTML 요소와 노드객체

HTML요소는 HTML문서를 구성하는 개별적인 요소를 의미한다.

Untitled

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

HTML문서는 HTML요소들의 집합으로 이뤄지며, HTML요소는 중첩 관계를 갖는다. 즉, HTML요소의 콘텐츠 영역에는 텍스트뿐만 아니라 다른 HTML요소도 포함될 수 있다.

이때 HTML요소간에는 중첩관계에 의해 계층적인 부자관계가 형성된다. 이러한 HTML요소간의 부자관계를 반영하여 HTML문서의 구성 요소의 HTML요소를 객체화한 모든 노드 객체들을 트리 자료로 구성한다.

트리 자료구조

부모노드와 자식노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조이다.

노드 객체의 트리로 구조화 되어있기 때문에 DOM을 DOM트리라고 부르기도 한다.

39.1.2 노드 객체 타입

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="oranger">Orange</li>
    </ul>
    <script src="app.js"></script>
</body>
</html>

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

Untitled.png