728x90
반응형
Part 2: DOM 트리 구조 이해하기
DOM은 트리(Tree) 구조입니다
왜 트리 구조를 알아야 할까요? DOM의 구조를 이해해야 요소들 사이를 이동하고, 원하는 요소를 찾고, 관계를 파악할 수 있기 때문입니다.
HTML 예시
html
<!DOCTYPE html>
<html>
<head>
<title>내 웹사이트</title>
</head>
<body>
<h1>제목</h1>
<div id="container">
<p>문단 1</p>
<p>문단 2</p>
</div>
</body>
</html>
```
#### DOM 트리로 표현
```
Document (최상위)
│
└─── html (루트 요소)
├─── head
│ └─── title
│ └─── "내 웹사이트" (텍스트 노드)
│
└─── body
├─── h1
│ └─── "제목" (텍스트 노드)
│
└─── div#container
├─── p
│ └─── "문단 1" (텍스트 노드)
│
└─── p
└─── "문단 2" (텍스트 노드)노드(Node)의 종류
왜 노드 종류를 구분할까요? 각 노드 타입마다 사용할 수 있는 메서드와 속성이 다르기 때문입니다.
1. Element Node (요소 노드)
javascript
// HTML 태그들
<div> // Element Node
<p> // Element Node
<button> // Element Node특징:
- HTML 태그를 나타냄
- 가장 많이 다루는 노드
- 자식을 가질 수 있음
2. Text Node (텍스트 노드)
javascript
<p>이것이 텍스트 노드입니다</p>
// ↑ 이 부분이 Text Node특징:
- 태그 안의 실제 텍스트 내용
- 항상 요소 노드의 자식
- 자식을 가질 수 없음 (리프 노드)
3. Document Node (문서 노드)
javascript
document // 이것이 Document Node특징:
- DOM 트리의 최상위
- 모든 것의 시작점
- 전역 변수로 접근 가능
트리 구조의 관계
왜 관계를 알아야 할까요? 한 요소에서 다른 요소로 이동하거나, 주변 요소를 찾을 때 필요하기 때문입니다.
html
<div id="parent">
<p id="child1">첫 번째</p>
<p id="child2">두 번째</p>
</div>관계 용어:
javascript
let parent = document.getElementById('parent');
let child1 = document.getElementById('child1');
let child2 = document.getElementById('child2');
// 부모-자식 관계
console.log(child1.parentElement); // div#parent
console.log(parent.children); // [p#child1, p#child2]
// 형제 관계
console.log(child1.nextElementSibling); // p#child2
console.log(child2.previousElementSibling); // p#child1
// 조상-자손 관계
console.log(parent.contains(child1)); // true
728x90
반응형
'front-end development' 카테고리의 다른 글
| border-radius 값에 따른 테두리 변경 바로 테스트해보기 (0) | 2026.02.04 |
|---|---|
| JavaScript DOM 완벽가이드 - Part 1: DOM이란 무엇인가? (개념 이해) (0) | 2026.01.23 |
| JavaScript console.log(): 개발자의 필수 도구 (0) | 2026.01.22 |
| JavaScript 메서드(Method): 객체 안의 함수 활용하기 (0) | 2026.01.22 |
| main을 화면 중앙에 배치하려면? margin: auto vs text-align: center (0) | 2025.09.13 |