DOM(Document Object Model) 구조와 정의

대부분의 웹페이지는 HTML로 구성되어 있지만, 우리가 브라우저에서 상호 작용하는 것은 단순한 정적인 HTML 문서가 아닙니다. 웹페이지는 브라우저에 의해 DOM(Document Object Model)이라는 구조화된 객체 모델로 변환되며, 이 DOM을 통해 JavaScript는 페이지의 내용을 읽고 수정할 수 있습니다.

DOM은 웹의 핵심 작동 원리이자 프로그래밍 가능한 웹의 뼈대입니다. 버튼 클릭, 폼 입력, 실시간 데이터 변경 등 우리가 웹에서 경험하는 대부분의 동적인 동작은 DOM 조작을 통해 이루어집니다.

이 섹션은 DOM의 정의부터 시작하여, HTML과의 관계, 표준화 된 구조로서의 DOM의 역할을 확인하고 DOM이 왜 중요한지 이해하여 웹 개발 및 SEO나 웹 성능 최적화에도 훨씬 깊이 있는 접근을 목적으로 합니다.

TOC

2mn read

✅ DOM이란 무엇인가?

↳ DOM의 정의

DOM(Document Object Model)은 HTML이나 XML 문서를 객체 기반으로 표현한 트리 구조입니다. 브라우저는 HTML을 해석해 각 요소를 객체화하여 메모리에 구성된 DOM 트리를 생성합니다. 이 트리는 JavaScript를 통해 접근하고 조작할 수 있으며, 문서의 구조나 내용, 스타일 등을 동적으로 변경할 수 있게 해 줍니다.

DOM은 ‘문서(document)’를 ‘객체(object)’로 모델링한 것으로, 개발자가 웹페이지를 프로그래밍 적으로 제어할 수 있는 핵심 수단입니다.

🔲 HTML과 DOM의 관계

HTML은 단지 마크업 언어일 뿐이지만, 브라우저는 이 HTML을 분석해 DOM이라는 객체 기반 구조로 변환합니다. 우리가 보는 웹페이지의 버튼, 이미지, 링크 등은 모두 DOM의 일부분으로 표현되며, JavaScript는 이 DOM을 통해 해당 요소들을 선택하고 조작합니다.

즉, HTML은 정적인 문서, DOM은 해석된 동적 구조이며, DOM은 HTML을 기반으로 생성되지만 JavaScript와 상호작용이 가능한 형태로 존재합니다.

HTML

🔲 W3C와 DOM 표준

DOM은 국제 웹 표준 기구인 W3C에서 정의한 표준 명세를 따릅니다. DOM은 단일 기술이 아니라 HTML DOM, XML DOM, SVG DOM 등 다양한 문서 유형에 따라 세분화된 API 집합으로 구성됩니다.

W3C는 DOM을 다음과 같이 정의합니다.

“DOM은 프로그램과 스크립트가 문서의 내용, 구조 및 스타일에 동적으로 접근하고 업데이트할 수 있도록 하는 플랫폼 및 언어 중립 인터페이스입니다.”

✅ DOM 트리의 구조와 구성 요소

📦 Node(DOM의 모든 노드 유형의 최상위 개념)
   ├─ 🧱 Element Node
   │     ├─🆔 nodeType: 1
   │     └─🧩HTML 요소 태그 (예: <div>, <p>, <a>)
   │        ↳ DOM 조작에서 가장 핵심적으로 사용
   │        ↳ 주요 DOM 구성 요소 ①
   │
   ├─ 🔧 Attribute Node
   │     ├─🆔 nodeType: 2
   │     └─🧩HTML 요소의 속성 (예: href, id, class 등)
   │        ↳ HTML5 이후엔 getAttribute 등으로 접근 (직접 DOM 트리에는 포함되지 않음)
   │        ↳ 주요 DOM 구성 요소 ②
   │
   ├─ 📝 Text Node
   │     ├─🆔 nodeType: 3
   │     └─요소 내부의 텍스트 콘텐츠 (예: "Hello World")
   │        ↳ 주요 DOM 구성 요소 ③
   │	  
   ├─ 💬 Comment Node
   │     ├─🆔 nodeType: 8
   │     └─ <!-- 주석 내용 --> 형태의 노드
   │	  
   ├─ 📄 Document Node
   │     ├─🆔 nodeType: 9
   │     └─ 문서 전체를 대표하는 최상위 노드 (`document` 객체)
   │	  
   ├─ 📑 DocumentType Node
   │    ├─ 🆔 nodeType: 10
   │    └─ <!DOCTYPE html> 과 같은 문서 유형 선언 노드
   │    
   └─ 🧭 ProcessingInstruction Node
       ├─ 🆔 nodeType: 7
       └─ XML 문서에서 처리 명령을 정의할 때 사용

🔲 노드(Node)란?

DOM은 트리 형태의 구조로 구성되며, 이 트리의 각 구성 요소는 노드라 불립니다. 노드는 크게 7가지 유형이 있으며, 이 중에서 가장 많이 사용되는 것은 요소 노드, 텍스트 노드, 속성 노드입니다.

모든 HTML 요소는 하나의 노드이며, 문서 전체를 대표하는 document 객체도 하나의 최상위 노드입니다. 즉, DOM은 “노드들의 계층 구조”라고 할 수 있습니다.

🔲 주요 노드: 요소, 텍스트, 속성

🧱요소 노드Element Node, nodeType: 1
↳ <div>, <p>, <a> 등 HTML 태그 하나하나가 모두 요소 노드입니다. 실제 페이지를 구성하는 주요 단위입니다.
📝텍스트 노드Text Node, nodeType: 3
↳ 요소 내부에 존재하는 텍스트 콘텐츠 자체를 나타냅니다. 예: <p>Hello</p> → “Hello”는 텍스트 노드입니다.
🔧속성 노드Attribute Node, nodeType: 2
↳ 요소의 부가 정보를 담고 있는 노드입니다. 예: <a href=”#”>에서 href는 속성 노드입니다.

이 세 가지 노드가 DOM을 구성하는 핵심이며, JavaScript는 이들을 선택하고 수정함으로써 페이지를 동적으로 제어할 수 있습니다.

🔲 기타 노드 유형 요약

💬 주석 노드Comment Node, nodeType: 8
↳ <!– 이렇게 쓰이는 주석 내용 –>을 표현하는 노드입니다.
📄 문서 노드Document Node, nodeType: 9
↳ 전체 DOM 트리의 최상위 객체로, 자바스크립트에서 사용하는 document 객체입니다.
📑 문서유형 노드DocumentType Node, nodeType: 10
↳ <!DOCTYPE html>처럼 문서 유형을 선언하는 노드입니다.
🧭 처리 명령 노드ProcessingInstruction Node, nodeType: 7
↳ XML 문서에서 처리 명령(PI)을 나타낼 때 사용됩니다.

🔲 부모/자식/형제 관계

DOM은 트리 구조이기 때문에 위계 관계가 존재합니다.

👨‍👧부모 노드Parent Node
↳ 다른 노드를 포함하는 상위 노드입니다. 예: <ul>은 <li>들의 부모입니다.
👨‍🎓자식 노드Child Node
↳ 특정 노드 내부에 포함된 하위 노드입니다.
🤝형제 노드Sibling Node
↳ 동일한 부모 아래 위치한 노드들입니다.

이 관계 덕분에 JavaScript는 parentNode, childNodes, nextSibling, previousSibling 같은 프로퍼티를 통해 문서 구조를 탐색하거나 조작할 수 있습니다.

✅ DOM 생성 과정: 브라우저 렌더링 흐름

↳ HTML 파싱과 DOM 트리 생성

📦 Document Object Model (DOM)
 ├─📄정의
 │  └─ HTML 문서를 브라우저가 구조화한 **객체 트리 모델**
 │        ↳ HTML 요소들을 노드(Node)로 구성
 │        ↳ JavaScript로 조작 가능
 │  
 └─🔁생성 과정
    ├─ HTML 파싱 시작
    ├─ DOM 트리 생성
    ├─ [이벤트] DOMContentLoaded 발생
    │   └─ DOM이 완성됨 (스타일시트·이미지 등은 아직 로딩 중일 수 있음)
    │       ↳ JavaScript로 DOM 조작 가능한 상태
    │
    ├─ CSS 파싱 → CSSOM 생성
    ├─ DOM + CSSOM → 렌더 트리 생성
    ├─ 렌더링 (Layout + Paint)
    └─ [이벤트] load 발생
        └─ 모든 리소스 로딩 완료 (이미지, iframe, 외부 스크립트 포함)

브라우저는 HTML 문서를 위에서 아래로 순차적으로 파싱하면서 DOM 트리를 구성합니다. 이 과정은 다음과 같이 진행됩니다.

HTML Parser가 <html>, <head>, <body> 등 태그를 읽어가며 각 요소를 노드로 변환
이 노드들을 계층 구조로 연결해 DOM(Document Object Model) 트리를 생성
DOM 트리는 이후 JavaScript와 CSS 렌더링의 기반이 됩니다

이 시점에서 아직 CSS나 이미지 등은 완전히 적용되지 않았으며, 브라우저는 문서 구조만 우선 구성합니다.

🔲 CSSOM과 렌더 트리

HTML뿐 아니라 CSS도 별도로 파싱되어 CSSOM(CSS Object Model)이라는 객체 구조로 구성됩니다.

렌더링에 필요한 실제 트리는 아래와 같은 과정을 통해 형성됩니다.

1. DOM + CSSOM → 렌더 트리 생성Render Tree
2. 각 요소가 어떻게 보일지 스타일 포함한 시각적 표현 구조로 바뀜
3. 이 렌더 트리를 기준으로 브라우저는 레이아웃 계산과 그리기 작업을 수행함

렌더 트리는 display: none 요소는 제외하고, visibility: hidden 요소는 포함됩니다.

🔲 DOMContentLoaded vs Load 이벤트

브라우저의 렌더링 완료 시점을 감지하는 두 가지 주요 이벤트가 있습니다.

이벤트	발생 시점	설명
DOM Content Loaded	DOM 트리 완성 직후	HTML 파싱이 끝나고, 스크립트 실행 가능한 시점 (이미지, 스타일시트 로딩은 완료되지 않아도 됨)
Load	모든 리소스 로드 후	DOM + CSS + 이미지 + 외부 리소스까지의 모든 로드 완료된 후 발생

다음은 크롬 개발자 도구에서 확인할 수 있는 DOMContentLoaded와 Load 이벤트입니다.

DOM(Document Object Model) 구조와 정의