DOM 트리란?
DOM(Document Object Model) 트리는 HTML 문서를 계층적인 구조로 표현한 모델입니다. 웹 브라우저는 HTML 문서를 로드하면, 이를 트리(Tree) 구조로 변환하여 메모리에 저장합니다.
이 트리는 부모-자식 관계를 기반으로 구성되며, HTML 문서의 각 요소(태그)는 노드(Node)라는 개념으로 표현됩니다.
1. DOM 트리의 구조
DOM 트리는 HTML 문서의 구조를 반영하며, 아래와 같은 계층적 관계를 가집니다.
- 문서 노드 (Document Node): DOM 트리의 최상위 노드로, 전체 문서를 대표함.
- 요소 노드 (Element Node): HTML 태그들 (<html>, <head>, <body> 등) 각각을 나타냄.
- 속성 노드 (Attribute Node): 요소 노드에 정의된 속성을 나타내며, 별도의 노드로 관리됨.
- 텍스트 노드 (Text Node): 요소 노드 내부의 실제 콘텐츠를 포함하는 노드.
📌 DOM 트리 예시 (HTML 문서 구조)
<!DOCTYPE html>
<html>
<head>
<title>DOM 트리 구조</title>
</head>
<body>
<h1>Hello World</h1>
<p>이것은 문단입니다.</p>
</body>
</html>위 HTML을 DOM 트리 구조로 나타내면 다음과 같습니다.
Document
├── <html> (Element)
│ ├── <head> (Element)
│ │ ├── <title> (Element)
│ │ │ ├── "DOM 트리 구조" (Text)
│ ├── <body> (Element)
│ ├── <h1> (Element)
│ │ ├── "Hello World" (Text)
│ ├── <p> (Element)
│ ├── "이것은 문단입니다." (Text)2. DOM 트리의 주요 구성 요소
DOM 트리는 여러 유형의 노드(Node)들로 구성됩니다.
| 노드 유형 | 설명 |
| 문서 노드 (Document) | HTML 문서 전체를 나타내며, DOM 트리의 루트(Root) 역할을 함. |
| 요소 노드 (Element) | HTML 태그(<html>, <body>, <div> 등)를 나타냄. |
| 속성 노드 (Attribute) | 요소의 속성(id, class 등)을 나타내며, 요소 노드와 연결됨. |
| 텍스트 노드 (Text) | HTML 요소 내부의 텍스트 콘텐츠를 포함함. |
| 주석 노드 (Comment) | HTML 문서 내의 주석(<!-- 주석 -->)을 포함함. |
3. DOM 트리에서 노드 탐색
자바스크립트를 사용하면 DOM 트리를 탐색하여 특정 노드를 선택하고 조작할 수 있습니다.
📌 DOM 탐색 주요 프로퍼티
parentNode: 부모 노드를 반환childNodes: 자식 노드 리스트를 반환firstChild: 첫 번째 자식 노드를 반환lastChild: 마지막 자식 노드를 반환nextSibling: 다음 형제 노드를 반환previousSibling: 이전 형제 노드를 반환
📌 예제: 특정 요소의 부모 및 자식 요소 찾기
const element = document.getElementById("demo");
console.log(element.parentNode); // 부모 요소 출력
console.log(element.childNodes); // 모든 자식 요소 출력
console.log(element.firstChild); // 첫 번째 자식 요소 출력4. DOM 조작
자바스크립트를 사용하여 DOM 트리에 새로운 요소를 추가하거나 기존 요소를 변경할 수 있습니다.
📌 새로운 요소 추가
const newElement = document.createElement("p"); // 새 문단 요소 생성
newElement.textContent = "새로 추가된 문단입니다."; // 내용 추가
document.body.appendChild(newElement); // body에 추가📌 기존 요소 삭제
const element = document.getElementById("demo");
element.parentNode.removeChild(element); // 요소 삭제📌 정리
| 기능 | 설명 |
| DOM 트리의 루트 | document 객체 |
| HTML 요소 찾기 | getElementById(), querySelector() |
| 노드 탐색 | parentNode, childNodes, nextSibling |
| 새로운 요소 추가 | document.createElement(), appendChild() |
| 기존 요소 삭제 | removeChild() |
💡 결론
DOM 트리는 HTML 문서를 계층적 구조로 표현하며, 이를 활용하면 HTML 요소를 쉽게 탐색하고 조작할 수 있습니다.
자바스크립트를 사용하여 DOM을 동적으로 변경하면 사용자와 상호작용하는 웹 페이지를 만들 수 있습니다. 🚀
반응형
'Frondend' 카테고리의 다른 글
| [HTML/JavaScript] querySelector, getElementById, addEventListener (0) | 2025.02.18 |
|---|---|
| [HTML] dl, dt, dd 태그 (2) | 2025.02.18 |
| [HTML] HTML5 란? (0) | 2025.02.17 |
| [CSS] CSS 시작하기 (0) | 2025.02.16 |
| [HTML] Html 시작하기 (2) | 2025.02.14 |