3.4 KiB
DOM(Document Object Model)
📌 Brief Summary
DOM(Document Object Model)은 브라우저가 HTML 마크업을 내부적으로 표현하기 위해 생성하는 계층적인 트리 구조의 객체 모델입니다 [1, 2]. 브라우저가 HTML 데이터를 수신하면서 점진적으로 생성하며, 웹 페이지의 모든 콘텐츠와 요소 간의 구조적 관계를 담고 있습니다 [1, 3, 4]. 자바스크립트(JavaScript) 내의 다양한 API를 통해 DOM에 접근하고 이를 동적으로 조작할 수 있습니다 [2].
📖 Core Content
-
DOM 생성 과정 (DOM Construction Process) 브라우저는 서버로부터 HTML 문서를 수신하면 즉시 파싱(Parsing)을 시작합니다 [5]. 이 과정은 전체 문서가 도착하기를 기다리지 않고 점진적(incremental)으로 이루어집니다 [1]. 수신된 데이터(바이트)는 문자로 변환되고, 이후 토큰(tokens)으로 변환된 다음 최종적으로 노드(nodes)로 변환되어 계층적인 DOM 트리를 형성합니다 [1, 6]. 시작 태그(startTag)와 종료 태그(endTag) 사이에 다른 태그들이 포함되는 방식으로 노드 간의 계층 구조가 정의됩니다 [6].
-
트리 구조와 구성 (Tree Structure and Composition) DOM 트리는 문서의 콘텐츠를 묘사하며,
<html>요소가 트리 구조의 첫 번째 요소이자 루트(root) 노드가 됩니다 [4]. 다른 요소 안에 중첩된 요소들은 자식 노드(child nodes)가 되어 트리 내부에서 각 요소의 관계와 계층을 반영합니다 [4]. 생성된 DOM 트리는 이후 스타일 정보를 담고 있는 CSSOM(CSS Object Model)과 결합하여 화면에 그려질 요소를 결정하는 렌더 트리(Render Tree)를 구축하는 데 사용됩니다 [7, 8]. -
성능에 미치는 영향 (Performance Implications) DOM 트리의 깊이와 복잡성은 브라우저의 성능과 직결됩니다 [9]. DOM에 존재하는 노드의 수가 많아질수록 렌더 트리 생성, 레이아웃(Layout), 페인트(Paint)와 같은 중요 렌더링 경로(Critical Rendering Path)의 후속 작업에 소요되는 시간과 연산 부담이 커지게 됩니다 [3, 4, 9].
-
직접적인 DOM 조작의 한계 (Limitations of Direct DOM Manipulation) 자바스크립트 등을 통해 DOM을 직접 변경하는 작업은 브라우저의 레이아웃(Reflow)과 페인트 단계를 지속적으로 트리거하기 때문에 본질적으로 속도가 느리고 비용이 많이 듭니다 [10]. 애플리케이션이 복잡해질 경우 여러 노드를 개별적으로 업데이트하면 중복 연산이 발생하며, 이는 React와 같은 프레임워크가 가상 DOM(Virtual DOM)을 도입하게 된 핵심 배경이 되었습니다 [10].
🔗 Knowledge Connections
- Related Topics: CSSOM(CSS Object Model), Critical Rendering Path(CRP), Render Tree, Virtual DOM, Reflow / Repaint
- Projects/Contexts: 브라우저 렌더링 과정 (Browser Rendering Process), 프론트엔드 성능 최적화 및 React의 Virtual DOM 도입 배경 이해 [7, 10, 11]
- Contradictions/Notes: 소스 간의 모순된 정보는 없습니다. 참고로 DOM의 생성은 점진적(incremental)으로 진행되어 문서를 파싱하는 동안에도 화면을 그리기 시작할 수 있지만, CSSOM의 생성은 렌더링을 차단(render-blocking)한다는 점에서 두 모델의 구축 방식에 차이가 있습니다 [3, 9].
Last updated: 2026-04-25