[LG CNS AM Inspire Camp] 3. DOM이란 무엇인가?

chillmyh 2025. 1. 2. 01:11

0. 들어가며

웹 개발을 하다 보면 자주 접하게 되는 단어 중 하나가 바로 DOM(Document Object Model) 이다. DOM은 웹 페이지를 구성하고, 자바스크립트가 그 안에서 동작할 수 있도록 돕는 중요한 개념이다. 이번 글에서는 DOM이 무엇인지, 그리고 자바스크립트와 어떤 관계를 맺고 있는지 알아보자.

1. DOM은 무엇인가?

DOM은 Document Object Model, 즉 "문서 객체 모델"을 뜻한다. 이는 브라우저가 HTML 문서를 이해하고 조작할 수 있는 구조를 제공한다. HTML은 텍스트로 작성된 문서지만, 브라우저는 이 문서를 바로 이해할 수 없기 때문에 트리 구조의 데이터 모델(DOM) 로 변환한다. 트리 구조를 사용하면 브라우저는 문서의 계층적 관계(부모-자식, 형제 관계 등)를 쉽게 이해하고, 필요한 작업을 효율적으로 수행할 수 있다.

쉽게 말해, DOM은 브라우저가 HTML 문서를 객체 형태의 트리 구조로 변환한 것이다.

예를 들어, 아래와 같은 HTML 문서가 있다고 하자.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM 예제</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>여기는 본문입니다.</p>
  </body>
</html>

이 HTML 문서는 DOM으로 변환되면 다음과 같은 트리 구조로 표현된다.

html
├── head
│   └── title
└── body
    ├── h1
    └── p

DOM 트리는 HTML 문서의 태그, 텍스트, 속성을 노드(Node) 라는 단위로 표현하며, 브라우저는 이 구조를 기반으로 문서를 처리하고 자바스크립트가 이를 조작할 수 있도록 한다.

2. 브라우저가 DOM을 이해한다는 것의 의미

DOM 트리를 생성한다는 것은, 브라우저가 HTML 문서의 구조와 요소 간의 관계를 명확히 파악하고 이를 기반으로 작업을 수행할 수 있음을 뜻한다.
이 과정은 다음과 같은 단계를 거친다:

HTML 파싱
- 브라우저의 HTML 파서가 HTML 문서를 읽어 들여 각 태그, 속성, 텍스트를 식별한다.
트리 구조 생성
- HTML 태그를 계층적인 노드로 변환하여 DOM 트리를 생성한다.
- 부모-자식 관계를 통해 각 요소 간의 구조를 표현한다.
브라우저의 이해
- DOM 트리를 통해 브라우저는 각 요소의 위치, 관계, 속성 등을 인식하고, 이를 화면에 렌더링하거나 자바스크립트의 명령을 처리할 수 있게 된다.

3. DOM 트리와 자바스크립트의 관계

DOM이 중요한 이유는 자바스크립트가 이를 기반으로 웹 페이지를 조작하기 때문이다. 자바스크립트는 DOM을 통해 HTML 구조를 읽고, 수정하고, 사용자 상호작용에 반응한다.

자바스크립트를 활용한 DOM 조작 예시

HTML:

<div id="app">
  <h1>안녕하세요</h1>
</div>

JavaScript:

const app = document.querySelector('#app'); // DOM 트리에서 #app 요소 선택
app.style.backgroundColor = 'lightblue'; // 배경색 변경

const heading = document.querySelector('h1'); // h1 요소 선택
heading.textContent = '반갑습니다!'; // 텍스트 수정

이 코드가 실행되면 브라우저는 DOM 트리에서 #app과 <h1> 노드를 찾아 스타일과 내용을 변경하고, 이를 화면에 반영한다.

4. 트리 구조를 사용하는 이유

브라우저는 왜 DOM을 트리 구조로 변환할까? 트리 구조는 탐색과 조작을 효율적으로 처리할 수 있는 데이터 모델이기 때문이다.

트리 구조의 장점

탐색이 쉽다
부모-자식 관계를 기반으로 원하는 노드를 빠르게 찾을 수 있다.
- 예: <body> 안의 <h1> 태그를 찾으려면 루트 노드에서 자식을 따라 탐색하면 된다.
수정이 간단하다
특정 노드만 선택해 수정하거나 삭제할 수 있다.
- 예: <p> 요소를 삭제하려면 DOM 트리에서 해당 노드만 제거하면 된다.
렌더링 최적화가 가능하다
DOM 트리는 요소 간의 관계를 명확히 표현하므로, 브라우저는 변경된 부분만 다시 렌더링(리플로우)할 수 있다. 이를 통해 성능을 최적화할 수 있다.

5. 브라우저 동작 과정과 DOM의 역할

브라우저가 HTML을 처리하는 과정

HTML 파싱 → DOM 트리 생성
CSS 파싱 → CSSOM 트리 생성
DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성
레이아웃 계산 및 렌더링 → 화면에 웹 페이지 표시

자바스크립트의 역할

DOM 트리가 생성되면 자바스크립트는 이 구조를 조작하거나, 사용자 이벤트(클릭, 입력 등)에 반응해 동적으로 페이지를 업데이트한다.

6. 마치며

DOM은 자바스크립트가 HTML과 상호작용할 수 있는 다리 역할을 한다. DOM을 잘 이해하면 정적인 HTML 문서를 동적으로 변환해 더 나은 사용자 경험을 제공할 수 있다. 직접적으로 개발에 DOM을 사용하는 일은 거의 없겠지만, 이러한 역할을 이해한다면 보다 나은 웹 개발이 가능할 것 같다.