### DOM(Document Object Model) 이해하기
웹 개발을 하다 보면 "DOM"이라는 용어를 자주 접하게 됩니다. DOM은 **Document Object Model**의 약자로, 웹 문서를 프로그래밍적으로 조작할 수 있도록 만든 **트리 구조의 객체 모델**입니다. 웹 페이지는 HTML로 구성되어 있으며, 브라우저는 이 HTML 문서를 DOM으로 변환하여 화면에 보여주고, 이를 자바스크립트로 제어할 수 있게 합니다.
이 글에서는 DOM이 무엇인지, 어떻게 동작하는지, 그리고 실전에서 어떻게 활용할 수 있는지 자세히 알아보겠습니다.
---
### 1. DOM이란 무엇인가?
DOM은 웹 페이지의 구조를 **트리 형태로 표현한 객체 모델**입니다. HTML 문서가 브라우저에 의해 로드되면, 브라우저는 이를 분석해 **DOM 트리**로 변환합니다. 이 트리는 HTML 문서의 태그를 **노드(Node)**라는 객체로 표현하며, 각 노드는 다른 노드와 **부모-자식 관계**로 연결되어 있습니다.
예를 들어, 다음과 같은 간단한 HTML 문서를 생각해봅시다.
```html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
이 HTML 문서는 브라우저에 의해 다음과 같은 DOM 트리로 변환됩니다.
```
- Document
├─ html
│ ├─ head
│ │ └─ title ("My Page")
│ └─ body
│ ├─ h1 ("Hello, World!")
│ └─ p ("This is a paragraph.")
```
### 2. DOM의 구조
DOM은 노드로 이루어진 트리 구조입니다. 이 노드들은 크게 **다섯 가지 종류**로 나눌 수 있습니다.
1. **Document 노드**: 트리의 최상위에 있는 문서 전체를 나타내는 노드입니다. `document` 객체로 접근할 수 있으며, 모든 다른 노드들은 이 문서의 하위 노드입니다.
2. **Element 노드**: HTML 태그는 각각 하나의 **요소(Element)**로 표현됩니다. `<div>`, `<p>`, `<h1>` 등의 HTML 요소가 이 노드에 해당하며, 속성(attribute)과 자식 노드를 가질 수 있습니다.
3. **Text 노드**: 태그 안에 들어가는 실제 텍스트는 **텍스트 노드**로 표현됩니다. 예를 들어, `<p>Hello</p>` 안의 `"Hello"`는 텍스트 노드로 변환됩니다.
4. **Attribute 노드**: HTML 요소의 속성(attribute)은 속성 노드로 표현됩니다. 예를 들어 `<img src="image.jpg">`에서 `src`는 속성 노드입니다.
5. **Comment 노드**: HTML 주석(`<!-- Comment -->`)은 **주석 노드**로 변환됩니다.
### 3. DOM의 주요 특징
#### 1) **동적 문서 구조 조작**
DOM을 사용하면 자바스크립트를 통해 HTML 요소를 **동적으로 추가**, **제거**하거나 **수정**할 수 있습니다. 예를 들어, 버튼을 클릭할 때 새로운 요소를 페이지에 추가하는 등의 상호작용이 가능합니다.
#### 2) **이벤트 처리**
DOM 요소에 다양한 **이벤트**(클릭, 키보드 입력, 마우스 움직임 등)를 연결하여 사용자의 행동에 따라 반응할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 특정 동작을 수행하도록 할 수 있습니다.
#### 3) **DOM 트리 탐색**
자바스크립트를 통해 DOM 트리의 특정 노드에 접근하고, 그 노드의 속성이나 내용을 조작할 수 있습니다. 이를 위해 다양한 DOM API를 제공합니다. `getElementById`, `querySelector`, `parentNode`, `childNodes` 등을 사용하여 원하는 요소에 쉽게 접근할 수 있습니다.
### 4. DOM을 조작하는 방법
DOM은 자바스크립트를 통해 **조작**할 수 있습니다. 여기서는 DOM을 조작하는 기본적인 방법들을 소개하겠습니다.
#### 1) **DOM 요소 선택**
DOM 요소에 접근하기 위해 가장 많이 사용되는 메서드는 `document.getElementById`와 `document.querySelector`입니다.
- `document.getElementById('id')`: 특정 ID를 가진 요소를 선택합니다.
- `document.querySelector('selector')`: CSS 선택자를 사용해 요소를 선택합니다. 여러 요소 중 첫 번째 요소만 반환됩니다.
예시:
```javascript
let heading = document.getElementById('main-title');
let paragraph = document.querySelector('.paragraph');
```
#### 2) **DOM 요소 생성 및 추가**
DOM 트리에 새로운 요소를 추가하려면 `document.createElement`를 사용해 요소를 생성하고, `appendChild`나 `insertBefore` 메서드를 사용해 원하는 위치에 추가할 수 있습니다.
예시:
```javascript
let newDiv = document.createElement('div');
newDiv.textContent = "새로운 요소입니다!";
document.body.appendChild(newDiv); // body에 새로운 div 추가
```
#### 3) **DOM 요소 수정**
선택된 요소의 **텍스트**나 **속성**을 수정할 수 있습니다. 이를 통해 동적으로 웹 페이지를 업데이트할 수 있습니다.
예시:
```javascript
let heading = document.getElementById('main-title');
heading.textContent = "새로운 제목"; // 텍스트 변경
heading.style.color = "blue"; // 스타일 변경
```
#### 4) **DOM 요소 삭제**
DOM 트리에서 특정 요소를 삭제하려면 `removeChild` 메서드를 사용합니다.
예시:
```javascript
let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.removeChild(child); // child 요소 삭제
```
### 5. DOM의 이벤트 처리
DOM에서는 다양한 **이벤트**를 처리할 수 있습니다. 이벤트는 사용자와 웹 페이지 사이의 상호작용을 처리하는 핵심입니다. 예를 들어, 클릭 이벤트, 키보드 입력, 스크롤 등의 이벤트가 발생할 때 특정 동작을 정의할 수 있습니다.
```javascript
let button = document.querySelector('button');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
```
### 6. DOM 활용 예시
#### 1) **실시간 입력 문자 수 표시**
다음 예시는 사용자가 입력 필드에 글자를 입력할 때마다 남은 문자의 수를 실시간으로 표시하는 예입니다.
```html
<input type="text" id="text-input" maxlength="20">
<p id="char-count">남은 문자 수: 20</p>
<script>
let input = document.getElementById('text-input');
let charCount = document.getElementById('char-count');
input.addEventListener('input', function() {
let remaining = 20 - input.value.length;
charCount.textContent = `남은 문자 수: ${remaining}`;
});
</script>
```
---
### 7. 결론
DOM은 웹 페이지를 동적으로 조작하고 상호작용을 가능하게 하는 매우 중요한 기술입니다. 이를 통해 자바스크립트로 HTML 요소를 추가, 수정, 삭제할 수 있으며, 사용자 이벤트에 반응하는 인터랙티브한 웹 애플리케이션을 만들 수 있습니다. DOM을 잘 활용하면 웹 페이지의 동작을 제어하고, 사용자 경험을 개선하는 데 큰 도움이 됩니다.
개발공부