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을 사용하는 일은 거의 없겠지만, 이러한 역할을 이해한다면 보다 나은 웹 개발이 가능할 것 같다.
'Experience > LG CNS AM Inspire Camp 1기' 카테고리의 다른 글
| [LG CNS AM Inspire Camp] 5. 이벤트 핸들링 및 컴포넌트 상태 관리 (0) | 2025.02.10 |
|---|---|
| [LG CNS AM Inspire Camp] 4. 리액트 실습 - 랜덤 댕댕이 생성기 (0) | 2025.01.08 |
| [LG CNS AM Inspire Camp] 2. JavaScript와 Browser의 동작원리 (1) | 2025.01.02 |
| [LG CNS AM Inspire Camp] 1. IntelliJ는 잠시.. VSCode에 적응해보기 (1) | 2024.12.31 |
| LG CNS AM Inspire Camp 1기 시작 (1) | 2024.12.27 |
