DOM이란?
- HTML, XML 문서를 객체(Object) 기반의 트리 구조로 표현한 프로그래밍 인터페이스
- HTML 문서를 브라우저가 파싱(Parsing) 하면 DOM 트리를 생성
- JavaScript를 이용해 DOM을 조작
- DOM을 통해 웹 문서를 동적으로 변경, 추가, 삭제 가능
DOM의 구성 요소 (Node 타입)
- DOM은 여러 개의 노드(Node) 로 구성
- 노드는 HTML 문서의 각 요소를 표현
| 노드 타입 | 설명 | 예제 |
|---|
| Document 노드 | 문서 전체를 나타내는 최상위 노드 | document |
| Element 노드 | HTML 태그를 의미 | <div>, <h1> |
| Text 노드 | 태그 안의 텍스트를 의미 | "Hello World" |
| Attribute 노드 | 요소의 속성을 의미 | class="btn" |
| Comment 노드 | 주석을 의미 | <!-- 주석 --> |
DOM 트리 구조 이해하기
DOM 트리 구조 표현
Document
├── <html>
│ ├── <head>
│ │ ├── <title> → "DOM Example"
│ ├── <body>
│ ├── <h1 id="title"> → "Hello DOM"
│ ├── <p class="desc"> → "DOM 트리 구조 예제"
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="title">Hello DOM</h1>
<p class="desc">DOM 트리 구조 예제</p>
</body>
</html>
- HTML 요소들은 계층적인 트리 구조 로 구성
- 각 태그(Element)는 노드(Node) 로 표현되며, 자식 요소를 가질 수 있음
- 텍스트는 Text 노드로 분리 되어 저장
DOM 조작 (탐색, 생성, 수정, 삭제)
DOM 요소 선택 (탐색)
<h1 id="title">Hello DOM</h1>
<p class="desc">DOM 트리 구조 예제</p>
const title = document.getElementById("title");
console.log(title.textContent);
const paragraph = document.querySelector(".desc");
console.log(paragraph.textContent);
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent);
| 선택 방법 | 메소드 | 반환 타입 |
|---|
| ID로 선택 | document.getElementById(id) | 단일 요소 (Element) |
| 클래스 선택 | document.querySelector(".class") | 첫 번째 매칭 요소 (Element) |
| 태그명 선택 | document.getElementsByTagName("tag") | HTMLCollection (유사 배열) |
DOM 요소 생성 및 추가
const newParagraph = document.createElement("p");
newParagraph.textContent = "새로운 문장 추가됨!";
document.body.appendChild(newParagraph);
결과 (HTML 변경됨)
<body>
<h1 id="title">Hello DOM</h1>
<p class="desc">DOM 트리 구조 예제</p>
<p>새로운 문장 추가됨!</p>
</body>
| 메소드 | 설명 |
|---|
document.createElement(tag) | 새로운 요소 생성 |
parent.appendChild(child) | 부모 요소의 자식으로 추가 |
DOM 요소 수정
- 기존 요소의 속성, 텍스트, HTML을 변경 가능
title.textContent = "변경된 제목";
paragraph.innerHTML = "<b>굵은 글씨</b>";
paragraph.setAttribute("class", "new-class");
| 메소드 / 프로퍼티 | 설명 |
|---|
element.textContent | 요소의 텍스트 내용 변경 |
element.innerHTML | 요소의 HTML 변경 |
element.setAttribute(name, value) | 속성 추가/변경 |
DOM 요소 삭제
document.body.removeChild(newParagraph);
paragraph.remove();
| 메소드 | 설명 |
|---|
parent.removeChild(child) | 특정 자식 요소 제거 |
element.remove() | 해당 요소 자체 제거 |
이벤트(Event)와 이벤트 리스너
- DOM 요소에 이벤트를 추가하여 사용자와의 상호작용을 처리 가능
const button = document.createElement("button");
button.textContent = "클릭하세요";
document.body.appendChild(button);
button.addEventListener("click", function () {
alert("버튼이 클릭됨!");
});
| 이벤트 등록 방식 | 설명 |
|---|
element.onclick = function() | 단순한 이벤트 핸들러 |
element.addEventListener("event", function) | 여러 개의 이벤트 등록 가능 |
DOM 최적화 기법
- DOM 조작이 많을 경우 성능 최적화가 필요함
Fragment 사용
document.createDocumentFragment() 를 사용하면 DOM에 직접 삽입하는 연산을 감소 가능
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
let p = document.createElement("p");
p.textContent = `문장 ${i}`;
fragment.appendChild(p);
}
document.body.appendChild(fragment);
Reflow & Repaint 최소화
- 스타일 변경 시
classList 를 활용하면 Reflow 비용을 절감 가능
element.style.color = "red";
element.style.fontSize = "20px";
element.classList.add("active");
Debounce & Throttle 적용
scroll, resize 이벤트가 과도하게 발생하는 것을 방지 가능
function debounce(func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
window.addEventListener("resize", debounce(() => {
console.log("Resized!");
}, 300));
