DOM(Document Object Model)을 다룰 때, 특정 요소나 노드를 선택하고 조작하려면 DOM 트리 내에서 노드를 탐색할 수 있는 프로퍼티를 활용하는 것이 중요하다. 이번 글에서는 요소 노드와 모든 노드에 대해 사용할 수 있는 탐색 프로퍼티를 정리하고, DOM 트리 구조와 노드 생성 과정,
nodeType을 활용한 노드 구분 방법 등을 추가로 살펴본다.
1. 요소 노드 탐색 프로퍼티
- *요소 노드(Element Node)**는 HTML 태그를 표현하는 노드로, 일반적으로 가장 많이 다루는 대상이다. 요소 노드 간의 관계를 기반으로 탐색할 때 사용되는 주요 프로퍼티는 다음과 같다:
| 프로퍼티 | 유형 | 설명 |
|---|---|---|
element.children | 자식 요소 노드 | 요소의 자식 요소들을 포함한 HTMLCollection 반환 |
element.firstElementChild | 자식 요소 노드 | 요소의 첫 번째 자식 요소 반환 |
element.lastElementChild | 자식 요소 노드 | 요소의 마지막 자식 요소 반환 |
element.parentElement | 부모 요소 노드 | 요소의 부모 요소 반환 |
element.previousElementSibling | 형제 요소 노드 | 요소의 이전 형제 요소 반환 |
element.nextElementSibling | 형제 요소 노드 | 요소의 다음 형제 요소 반환 |
예제: 요소 노드 탐색
HTML 구조:
<div id="content">
<h1 id="title">JavaScript</h1>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
JavaScript:
const content = document.querySelector("#content");
// 자식 요소 탐색
console.log(content.children); // HTMLCollection [h1, ul]
console.log(content.firstElementChild); // <h1 id="title">JavaScript</h1>
console.log(content.lastElementChild); // <ul id="list">...</ul>
// 부모 요소 탐색
const title = document.querySelector("#title");
console.log(title.parentElement); // <div id="content">...</div>
// 형제 요소 탐색
const list = document.querySelector("#list");
console.log(list.previousElementSibling); // <h1 id="title">JavaScript</h1>
console.log(list.nextElementSibling); // null
2. 모든 노드 탐색 프로퍼티
모든 노드(All Node)에 대해 공통적으로 사용할 수 있는 탐색 프로퍼티는 다음과 같다:
| 프로퍼티 | 유형 | 설명 |
|---|---|---|
node.childNodes | 자식 노드 | 모든 자식 노드(NodeList)를 반환 |
node.firstChild | 자식 노드 | 첫 번째 자식 노드 반환 |
node.lastChild | 자식 노드 | 마지막 자식 노드 반환 |
node.parentNode | 부모 노드 | 부모 노드 반환 |
node.previousSibling | 형제 노드 | 이전 형제 노드 반환 |
node.nextSibling | 다음 형제 노드 | 다음 형제 노드 반환 |
주요 차이점
- 요소 노드 탐색 프로퍼티(
children,firstElementChild등)는 HTML 태그(요소 노드)만 반환. - 모든 노드 탐색 프로퍼티(
childNodes,firstChild등)는 텍스트 노드, 주석 노드 등도 포함.
3. parentNode와 parentElement의 차이
| 프로퍼티 | 설명 | 특징 |
|---|---|---|
parentNode | 부모 노드 반환 | 모든 노드에서 사용 가능. 부모가 요소 노드가 아닐 수도 있음. |
parentElement | 부모 요소 노드 반환 | 부모가 요소 노드인 경우에만 반환. 요소가 아닌 경우 null 반환. |
예제:
const textNode = document.querySelector("p").firstChild; // 텍스트 노드
console.log(textNode.parentNode); // <p>...</p> (부모 노드)
console.log(textNode.parentElement); // <p>...</p> (부모 요소 노드)
const bodyNode = document.body;
console.log(bodyNode.parentNode); // <html>...</html>
console.log(bodyNode.parentElement); // <html>...</html>
4. DOM 트리 생성 과정
브라우저가 HTML 문서를 해석하며 DOM 트리를 생성할 때, 각 코드의 역할에 따라 다양한 노드 타입이 만들어진다.
- HTML 태그 → 요소 노드(Element Node)
- 텍스트 → 텍스트 노드(Text Node)
- 주석 → 주석 노드(Comment Node)
DOM 트리 예시
HTML 코드:
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
I Love JavaScript
<!-- This is a comment -->
</body>
</html>
DOM 트리:
Document
├── html (Element Node)
│ ├── head (Element Node)
│ │ └── title (Element Node)
│ │ └── JavaScript (Text Node)
│ └── body (Element Node)
│ ├── I Love JavaScript (Text Node)
│ └── This is a comment (Comment Node)
5. nodeType으로 노드 타입 구분
nodeType 속성을 사용하면 노드 타입을 숫자로 확인할 수 있다.
nodeType 값 | 설명 |
|---|---|
1 | 요소 노드 (Element Node) |
3 | 텍스트 노드 (Text Node) |
8 | 주석 노드 (Comment Node) |
예제:
const elementNode = document.querySelector("#content");
const textNode = elementNode.firstChild;
console.log(elementNode.nodeType); // 1 (요소 노드)
console.log(textNode.nodeType); // 3 (텍스트 노드)
6. 텍스트 노드 주의점
DOM 트리 생성 시, HTML 코드의 들여쓰기나 줄바꿈도 텍스트 노드로 간주된다.
이로 인해 모든 노드 탐색 프로퍼티를 사용할 경우 의도치 않게 공백 노드를 선택할 수 있다.
문제 상황
<div>
<p>Text</p>
</div>
JavaScript:
const div = document.querySelector("div");
console.log(div.childNodes); // NodeList(3): [Text, p, Text]
- 첫 번째와 세 번째
Text노드는 줄바꿈과 공백으로 인해 생성된 텍스트 노드다.
요약
- 요소 노드 탐색:
children,firstElementChild,parentElement등. - 모든 노드 탐색:
childNodes,firstChild,parentNode등. parentNode와parentElement:- 요소 노드만 필요하면
parentElement사용.
- 요소 노드만 필요하면
nodeType활용: 노드의 타입(요소, 텍스트, 주석)을 판별.- 텍스트 노드 주의: 공백이나 줄바꿈도 텍스트 노드로 생성될 수 있음.
MOON.DEVLOG