DOM(Document Object Model)은 HTML 문서를 객체화한 구조로, 각 HTML 태그와 그 안의 내용을 노드(Node)로 표현한다. DOM의 계층적 구조는 DOM 트리로 비유되며, 이를 이해하면 HTML 문서의 태그와 내용을 더욱 효과적으로 조작할 수 있다.
1. DOM 트리 구조와 노드의 관계
HTML 문서는 계층 구조로 이루어져 있으며, DOM 트리로 표현된다. 이 구조는 각 태그를 노드(Node)로 변환하여 표현한다.
DOM 트리의 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<script src="script.js"></script>
</body>
</html>
위 HTML 문서를 DOM 트리로 표현하면 다음과 같다:
document: DOM 트리의 최상위 노드.html:document의 자식 노드이자 최상위 요소 노드.head와body:html의 자식 노드이며 형제 관계.head의 자식:<meta>태그와<title>태그.body의 자식:<h1>,<h2>,<script>태그.
노드의 관계 용어
- 부모 노드(Parent Node): 특정 노드를 포함하는 상위 노드.
- 자식 노드(Child Node): 특정 노드에 포함된 하위 노드.
- 형제 노드(Sibling Node): 같은 부모를 공유하는 노드.
관계 예시
<body>는<h1>의 부모 노드.<h1>과<h2>는 서로 형제 노드.<h1>은 자식 노드이며, 텍스트인"Heading 1"은 텍스트 노드로<h1>의 자식.
2. 노드의 타입
DOM 트리를 구성하는 노드(Node)는 여러 가지 타입이 있다. 그중에서 가장 중요한 두 가지는 요소 노드(Element Node)와 텍스트 노드(Text Node)이다.
1) 요소 노드 (Element Node)
- HTML 태그를 표현하는 노드.
- 다른 노드를 포함하거나 자식 노드를 가질 수 있다.
- 예:
<html>,<head>,<body>,<h1>,<script>.
2) 텍스트 노드 (Text Node)
- HTML 태그 안의 텍스트를 표현하는 노드.
- 항상 요소 노드의 자식 노드로 존재.
- 스스로는 자식 노드를 가질 수 없다.
3) 잎 노드 (Leaf Node)
- 텍스트 노드는 추가로 하위 노드를 가질 수 없는 구조적 특성 때문에 잎 노드(Leaf Node)로 불린다.
- 잎 노드는 DOM 트리에서 나뭇잎에 해당하는 위치를 가진다.
4) 기타 노드
- 주석 노드(Comment Node): HTML 주석을 표현.
<!-- This is a comment --> - 문서 노드(Document Node): 문서 전체를 표현하는 최상위 노드.
3. DOM 트리의 노드 타입과 사용 빈도
DOM은 총 12가지 노드 타입으로 구성되지만, 실제로 자주 사용되는 것은 다음 두 가지이다:
-
요소 노드(Element Node)
대부분의 DOM 조작은 요소 노드에서 이루어진다.
-
텍스트 노드(Text Node)
요소 노드 안의 텍스트를 다룰 때 사용된다.
그 외의 노드 타입은 특정 상황에서만 사용되며, 사용 빈도가 낮다.
DOM 트리는 주로 요소 노드와 텍스트 노드로 구성되므로, 이 두 타입에 대한 이해가 가장 중요하다.
요약
- DOM 트리는 HTML 문서를 계층적으로 표현한 구조이며, 각 구성 요소를 노드(Node)로 나타낸다.
- 노드의 관계:
- 부모, 자식, 형제 관계로 연결된다.
- 주요 노드 타입:
- 요소 노드(Element Node): HTML 태그를 표현.
- 텍스트 노드(Text Node): HTML 태그 안의 텍스트를 표현.
- 잎 노드(Leaf Node): 추가 자식을 가지지 않는 노드.
- 12가지 노드 타입 중 대부분의 DOM은 요소 노드와 텍스트 노드로 구성된다.
MOON.DEVLOG