[html] DOM (Document Object Model)이란?

7/18/2025, 3:34:53 PM

html

DOM (Document Object Model)은 웹페이지에 있는 모든 요소(텍스트, 버튼, 이미지 등)를 트리처럼 표현한 구조를 의미합니다.

HTML이 웹페이지를 짓는 설계도라면, DOM은 HTML을 읽고 만든 실제 구조물(브라우저가 그림으로 만들고 조작까지 가능한 상태)입니다. JavaScript는 이 DOM을 읽고, 고치고, 반응하게 만드는 도구입니다.

예시

<p>Hello</p>

브라우저는 위와 같은 html 문서를 객체(오브젝트)로 표현합니다.

{
  nodeName: "P",
  innerText: "Hello",
  children: []
}

이처럼, 실제 HTML 태그를 프로그램 코드로 표현한 게 바로 모델이고, 그걸 트리처럼 구조화한 게 바로 Document Object Model (DOM)입니다.

HTML 파일 로딩
HTML 파싱 (Parsing)
- 브라우저는 HTML 문서를 위에서부터 한 줄씩 읽어 내려가며 분석합니다.
- <html>, <head>, <body>, <div> 같은 태그들을 해석합니다.
DOM 트리 생성
- 파싱된 태그들을 바탕으로, 브라우저는 DOM 객체 트리(Tree)를 생성합니다.
- 각각의 태그가 하나의 노드(Node)가 되고, 부모-자식 관계로 트리 구조를 이룹니다.
화면 렌더링
- 만들어진 DOM을 기반으로, 브라우저는 화면에 웹페이지를 실제로 그립니다.