웹과 브라우저 객체 모델 (DOM · BOM · CSSOM · Render Tree)

Reference

1. 웹(Web)

웹은 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간이다.
HTML로 작성된 하나의 문서를 웹 페이지라고 하고, 이러한 페이지들의 집합을 웹 사이트라고 부른다.
웹 사이트는 고유한 주소(URL)를 통해 접근할 수 있으며, 흔히 말하는 홈페이지가 여기에 해당한다.

💡 브라우저는 HTML, CSS, JavaScript로 이루어진 웹 페이지를 해석하여 화면에 표시한다.
이때 HTML은 단순한 텍스트가 아니라, `브라우저가 객체로 구조화하여 제어할 수 있는 데이터로 변환된다.

2. DOM(Document Object Model)

웹 브라우저는 HTML 문서를 단순한 텍스트로 인식하지 않는다. 대신 이를 객체 기반의 트리 구조(DOM Tree)로 변환하여 자바스크립트가 접근하고 조작할 수 있도록 만든다.

💡 즉, DOM은 웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 인터페이스이다.

html

// HTML
<!DOCTYPE html>
<html>
  <body>
    <div><h1>Hello</h1></div>
    <div><p>World</p></div>
  </body>
</html>

less

// 브라우저 내부의 DOM 트리 구조
Document
└── html
    └── body
        ├── div
        │   └── h1 ("Hello")
        └── div
            └── p("World")

DOM이란?

DOM은 문서 객체 모델(Document Object Model)의 약자이다.
HTML 문서를 브라우저가 객체 형태로 구조화한 표현이다.
각 HTML 요소를 하나의 노드 Node 로 관리하며, 계층적인 트리 구조를 가진다.
자바스크립트는 DOM API를 통해 이 노드들을 탐색, 수정, 생성, 삭제할 수 있다.

💡 즉, HTML은 문자열 기반의 설계도이고, DOM은 그 설계도를 실제 브라우저 메모리 안에서 구현한 객체 구조물이다.

DOM 트리(DOM Tree)

브라우저는 HTML을 파싱하여 다음과 같은 DOM 트리 구조를 만든다.

less

Document
└── html
    └── body
        ├── div
        │   └── h1 ("Hello")
        └── div
            └── p("World")

노드 종류	예시	설명
문서 노드 (Document)	`document`	전체 HTML 문서를 대표하는 최상위 노드
요소 노드 (Element)	`<div>`, `<p>`, `<h1>`	HTML 태그에 해당하는 노드
텍스트 노드 (Text)	`"Hello"`	요소 내부의 실제 텍스트 내용
속성 노드 (Attribute)	`id="title"`, `class="box"` `src`	요소의 부가정보, 트리에 직접 포함되지는 않음
주석 노드 (Comment)	`<!-- 주석 -->`	브라우저에는 표시되지 않지만 DOM에는 존재

DOM과 HTML의 차이

구분	HTML	DOM
형태	문자열 기반의 문서	객체 기반의 트리 구조
위치	파일 또는 네트워크 상	브라우저 메모리 내부
용도	웹 페이지의 구조 정의	페이지를 조작할 수 있게 함
변경 가능성	정적(변경 불가)	동적(자바스크립트로 조작 가능)

💡 HTML은 정적인 파일이지만, DOM은 메모리 상의 동적 객체 모델이다.

렌더링과 DOM의 관계

브라우저는 HTML과 CSS를 각각 해석하여 DOM과 CSSOM을 생성하고, 이 둘을 결합해 렌더 트리를 만든다. 렌더 트리는 실제 화면에 표시될 요소들의 구조와 스타일 정보를 모두 포함한다.

HTML 파싱 → DOM 생성
CSS 파싱 → CSSOM 생성
DOM + CSSOM → Render Tree 생성
Render Tree → Layout 계산 및 Painting → 픽셀로 화면 출력

💡 DOM을 변경하면 브라우저가 다시 렌더 트리를 계산해야 한다.
과도한 DOM 조작은 Reflow/Repaint 성능 저하로 이어질 수 있다.

3. BOM (Browser Object Model)

BOM은 웹 브라우저 환경을 객체 형태로 표현한 모델이다.
즉, 브라우저 창(window), 주소창(location), 히스토리(history) 등 브라우저의 동작과 상태를 제어할 수 있게 해준다.

💡 DOM이 문서를 제어한다면, BOM은 브라우저를 제어한다.

주요 BOM 구성 객체

객체	설명	예시
`window`	브라우저의 최상위 객체로, 모든 전역 객체가 소속됨, 브라우저 창 자체를 의미	`window.alert("Hello")`
`document`	현재 웹 문서를 표현하는 객체 HTML 요소를 탐색, 조작할 수 있음	`document.title`
`navigator`	브라우저 정보(종류, 버전, 언어 등)를 제공	`navigator.userAgent`
`location`	현재 페이지의 URL 정보를 담고 있으며, 페이지 이동 및 새로고침 제어할 수 있음	`location.href`, `location.reload()`
`history`	브라우저의 방문 기록(세션 기록)을 제어할 수 있음	`history.back()`, `history.forward()`
`screen`	사용자 디스플레이 정보(화면 크기, 해상도 등)를 제공	`screen.width`, `screen.height` `console.dir(screen)`

💡 모든 BOM 객체는 window 객체의 하위 속성이다.
즉, window.location과 location은 동일하게 동작한다.

예시

console.log(window.location.href); // 현재 페이지 주소
window.alert("Hi from BOM!"); // 경고창 표시
history.back(); // 이전 페이지로 이동

window.console.log === console.log; // true

window는 브라우저의 전역 객체로, 모든 전역 변수와 함수가 자동으로 window 속성으로 등록된다.

4. CSSOM (CSS Object Model)

브라우저는 HTML을 해석해 DOM을 만들고, CSS를 해석해 CSSOM(CSS Object Model) 트리를 만든다. 이 두 개가 결합되어 렌더 트리(Render Tree)가 만들어지고, 그것을 바탕으로 실제 화면을 그리게 된다.

CSSOM 구조 예시

css

/* css */
div {
  color: red;
  margin: 10px;
}

// JS에서 접근
const div = document.querySelector("div");
const styles = getComputedStyle(div);

console.log(styles.color); // "rgb(255, 0, 0)"
console.log(styles.marginTop); // "10px"

// 실시간 스타일 변경
div.style.backgroundColor = "skyblue";

CSSOM은 스타일시트에 정의된 규칙들을 객체로 표현한 모델이다. 그래서 자바스크립트로 CSS 속성을 읽거나, 동적으로 수정할 수 있다.

5. 렌더 트리(Render Tree)

브라우저 렌더링 과정의 핵심은 DOM + CSSOM 결합이다. 이 두 모델을 통합해 실제 화면에 그릴 요소들의 구조(Render Tree)를 만든다.

HTML 파싱 → DOM 생성
CSS 파싱 → CSSOM 생성
DOM + CSSOM → Render Tree 생성
Render Tree → Layout 계산 (위치·크기 계산)
Painting → 실제 픽셀로 그리기

💡 DOM 조작이나 CSS 변경은 렌더 트리를 다시 계산하게 만든다.
그래서 잦은 DOM 변경은 성능에 영향을 준다. (이를 막기 위해 Virtual DOM 같은 개념이 등장)

6.DOM · BOM · CSSOM 요약

구분	설명	예시
DOM	HTML 문서를 객체로 표현	`document.querySelector()`
BOM	브라우저 환경을 객체로 표현	`window.location`, `history.back()`
CSSOM	CSS 스타일을 객체로 표현	`getComputedStyle(el)`
Render Tree	DOM + CSSOM 결합 결과	실제 화면 출력용 구조

💡 정리

브라우저는 HTML, CSS, JavaScript를 각자의 모델로 구조화하여 동작한다.

DOM → 문서 구조 관리
BOM → 브라우저 환경 제어
CSSOM → 스타일 정보 관리

이 세 모델이 결합되어 만들어지는 렌더 트리(Render Tree)는 화면에서 보는 웹 페이지의 뼈대가 된다.

웹과 브라우저 객체 모델 (DOM · BOM · CSSOM · Render Tree) ​

1. 웹(Web) ​

2. DOM(Document Object Model) ​

DOM이란? ​

DOM 트리(DOM Tree) ​

DOM과 HTML의 차이 ​

렌더링과 DOM의 관계 ​

3. BOM (Browser Object Model) ​

주요 BOM 구성 객체 ​

예시 ​

4. CSSOM (CSS Object Model) ​

CSSOM 구조 예시 ​

5. 렌더 트리(Render Tree) ​

6.DOM · BOM · CSSOM 요약 ​