웹 개발에서 자주 등장하는 용어인 트리, DOM, 노드는 HTML 문서를 구조적으로 표현하고 조작하기 위한 핵심 개념입니다.
1. 트리(Tree)란?
트리는 계층 구조를 표현하기 위한 자료구조입니다.
하나의 루트(Root) 노드에서 시작하여 자식 노드로 계속 뻗어나가는 구조를 가집니다.
A
/ | \
B C D
|
E- A: 루트 노드 (시작점)
- B, C, D: A의 자식 노드
- E: C의 자식 노드, A의 손자 노드
웹 문서는 이런 계층적 구조를 그대로 가지고 있기 때문에 트리로 표현하기에 적합합니다.
2. DOM(Document Object Model)이란?
DOM은 HTML 문서를 트리 구조로 표현한 객체 모델입니다.
브라우저는 HTML 문서를 받아 DOM 트리 구조로 만들고, 이 구조를 통해 HTML 요소를 제어하고 그립니다.
예시
<body>
<h1>제목</h1>
<p>문단</p>
</body>DOM 트리 구조
<body>
├── <h1>
│ └── "제목"
└── <p>
└── "문단"- 태그(h1, p)는 Element 노드
- 텍스트("제목", "문단")는 Text 노드
3. 노드(Node)란?
DOM 트리를 구성하는 각각의 점을 노드라고 합니다.
브라우저는 HTML 문서의 구성 요소를 모두 노드로 취급하며, 종류는 다음과 같습니다.
| 노드 종류 | 설명 |
|---|---|
| Document 노드 | 전체 문서를 나타내는 최상위 루트 노드 |
| Element 노드 | 실제 HTML 태그 (<div>, <p> 등) |
| Text 노드 | 태그 내부의 텍스트 내용 |
| Comment 노드 | HTML 주석 (<!-- 주석 -->) |
예시
<p>Hello, <strong>world</strong>!</p>DOM 트리 구조
<p>
├── "Hello, "
└── <strong>
└── "world"4. DOM을 알아야 하는 이유
자바스크립트는 DOM을 통해 HTML 문서의 구조와 내용을 제어합니다.
document.querySelector('p').innerText = "수정된 문장";<p>요소를 선택해 그 안의 텍스트 노드를 변경하는 코드입니다.- 이런 방식으로 자바스크립트를 통해 동적으로 웹 페이지를 변경할 수 있습니다.
5. 정리
- 트리(Tree)는 계층 구조를 표현할 수 있는 자료구조입니다.
- HTML 문서는 이러한 트리 구조로 해석될 수 있으며, 브라우저는 이를 기반으로 DOM(Document Object Model)이라는 구조를 생성합니다.
- DOM은 트리 구조로 표현된 HTML 문서이며, 이 트리는 각각의 노드(Node)로 구성됩니다.
- HTML의 각 요소(
<h1>,<p>,<img>등)는 모두 DOM의 노드로 취급됩니다. - 자바스크립트는 이 DOM에 접근하여, 각 노드를 조회, 수정, 추가, 삭제하는 방식으로 웹 페이지를 동적으로 제어합니다.
donggyun_ee