📄 DOM이란?

DOM(Document Object Model)은 HTML 문서를 객체(Object)의 트리 구조(Tree Structure) 로 표현한 것으로, 웹 페이지를 자바스크립트로 조작할 수 있는 구조적 기반입니다.

📌 핵심 요약표

항목	설명
정의	HTML 문서를 트리 형태로 표현한 구조 (문서 객체 모델)
역할	자바스크립트가 HTML을 읽고, 수정할 수 있게 함
생성 시점	브라우저가 HTML을 읽고 파싱할 때
주요 기능	요소 탐색, 속성 수정, 스타일 변경, 요소 추가/삭제 등
사용 이유	웹을 동적으로 만들기 위해 필수적인 기술

🌳 DOM의 생성 원리

HTML 문서가 로드되면, 브라우저는 문서를 파싱(parsing) 하여 내부적으로 DOM 트리를 만듭니다.

DOM 트리는 문서 구조를 계층적으로 표현한 트리 형태입니다. 각 요소(태그, 텍스트, 주석 등)는 ‘노드(Node)’라고 불립니다.

🧱 DOM 트리 예시

다음 HTML을 DOM 트리 구조로 표현해보겠습니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>안녕</h1>
    <!-- 여기 주석 -->
  </body>
</html>

🧭 DOM 트리 구조 (텍스트 표현)

Document
└── DocumentType (<!DOCTYPE html>)
└── html (Element)
    └── body (Element)
        ├── h1 (Element)
        │   └── "안녕" (Text)
        └── Comment ("여기 주석")

🧩 DOM의 구성 요소 (노드 종류)

노드 종류	설명
Document Node	문서 전체를 대표하는 최상위 노드
Element Node	HTML 태그 요소 (`<div>`, `<h1>` 등)
Text Node	요소 안의 텍스트 내용
Attribute Node	HTML 속성 (`id`, `class` 등)
Comment Node	주석 (`<!-- 주석 -->`)

Node는 HTML의 모든 구성 요소를 포괄합니다.

Element Node는 HTML 태그에 해당합니다.