중요 복습!!
📌 DOM이란?
HTML 문서는 브라우저 안에서 DOM(Document Object Model) 이라는 구조로 변환
DOM은 HTML을 트리(tree) 구조로 바꿔서, 자바스크립트로 요소를 제어할 수 있게 해주는 시스템
<예시>
<div>
<p>Hello</p>
</div>
<DOM 트리 구조>
div
└── p
└── "Hello"
5.0 엄마? 아빠? 엄빠? 형제?
DOM 트리는 HTML 문서를 구조화한 트리형태의 데이터
노드를 기준으로 구성되며, 각 노드들은 부모, 자식, 형제 관계를 가짐
🔍 DOM 탐색이란?
자바 스크립트로 특정 요소를 기준으로 부모, 자식, 형제 노드에 접근하는 것
❓왜 필요 할까?
- 버튼을 클릭하면 그 부모 요소를 삭제
- 특정 항목 옆에 새로운 항목을 주가
- 첫 번째/ 마지막 자식을 선택하여 스타일을 준다.
이러한 기능을 사용하려면 DOM 노드를 자유롭게 탐색 할 줄 알아야 한다.
이 파트에서는 자바스크립트를 통해 다음과 같은 노드들에 접근하는 방법을 알아보자
| 종류 | 설명 | 대표 속성 / 메서드 |
| 부모 노드 | 현재 노드의 한 단계 위 노드 | parentNode, parentElement |
| 자식 노드 | 현재 노드의 한 단계 아래 노드 | childNodes, children, firstChild, lastChild, firstElementChild, lastElementChild |
| 형제 노드 | 같은 부모를 가진 옆에 있는 노드 | previousSibling, nextSibling, previousElementSibling, nextElementSibling |
5.1 부모 노드에 접근하기
✅ 주요 속성
| 속성 | 설명 |
| parentNode | 부모 노드를 반환 (모든 노드 포함) |
| parentElement | 부모가 요소일 때만 반환 (요소 아닌 경우 null) |
💡parentNode와 parentElement의 차이는 요소 노드만 원할때 parentElement를 씀
parentNode는 텍스트나 주석 등 모든 노드를 포함,
parentElement는 HTML 요소 태그(div, p 등)만 포함
<div id="child">나는 자식입니다</div>
const child = document.getElementById("child");
console.log(child.parentNode);
// 👉 출력: <body>...</body> (또는 <div> 등 상위 요소)
console.log(child.parentElement);
// 👉 출력: <body>...</body> (요소일 경우 동일)
5.2 자식 노드에 접근하기
✅ 주요 속성
| 속성 | 설명 |
| childNodes | 모든 자식 노드 (텍스트, 공백 포함) |
| children | 요소 자식만 (HTML 태그만) |
| firstChild / lastChild | 첫/마지막 자식 (공백 포함 가능) |
| firstElementChild / lastElementChild | 요소만 대상 |
💡children 을 사용하면 HTML 태그만 추줄이 가능하여 더 정확함
children은 텍스트 노드를 제외하고요소만 배열처럼 반환
childNodes는 줄바꿈 공백도 포함하기 때문에 예상과 다를 수 있음
<div id="parent">
<p>첫 번째</p>
<p>두 번째</p>
</div>
const parent = document.getElementById("parent");
console.log(parent.childNodes);
// 👉 출력: [text, <p>, text, <p>, text]
console.log(parent.children);
// 👉 출력: [<p>첫 번째</p>, <p>두 번째</p>]
console.log(parent.firstChild);
// 👉 출력: #text (줄바꿈이나 공백일 수 있음)
console.log(parent.firstElementChild);
// 👉 출력: <p>첫 번째</p>
console.log(parent.lastChild);
// 👉 출력: #text (공백)
console.log(parent.lastElementChild);
// 👉 출력: <p>두 번째</p>
5.3 형제 노드에 접근하기
✅ 주요 속성
| 속성 | 설명 |
| previousSibling / nextSibling | 이전/다음 모든 노드 (공백 포함) |
| previousElementSibling / nextElementSibling | 이전/다음 요소 노드만 |
💡nextElementSibling이 훨씬 더 정확히 옆의 HTML 요소를 찾음
previousElementSibling과 nextElementSibling은 요소만 탐색
previousSibling, nextSibling은 줄바꿈, 공백도 포함된 모든 노드를 탐색
<ul>
<li id="item1">첫 번째</li>
<li id="item2">두 번째</li>
<li id="item3">세 번째</li>
</ul>
const second = document.getElementById("item2");
console.log(second.previousSibling);
// 👉 출력: #text (줄바꿈 공백)
console.log(second.previousElementSibling);
// 👉 출력: <li id="item1">첫 번째</li>
console.log(second.nextSibling);
// 👉 출력: #text (줄바꿈 공백)
console.log(second.nextElementSibling);
// 👉 출력: <li id="item3">세 번째</li>
✅ 실전 꿀팁 정리
| 목적 | 정확한 속성 사용 |
| 자식 중 요소만 | .children |
| 자식 중 첫 요소 | .firstElementChild |
| 형제 중 요소만 | .nextElementSibling |
| 공백/텍스트 포함 | .childNodes, .nextSibling 등 |
'프로그램 언어 > JavaScript Dom Part' 카테고리의 다른 글
| [J.S_DOM] 6. 요소 생성/ 추가/ 삭제 하기 (3) | 2025.08.09 |
|---|---|
| [J.S_DOM] 5-1. 부모 노드 접근 실습 예제 (0) | 2025.08.09 |
| [J.S_DOM] 4-1. 스타일 변경 예제 모음 (0) | 2025.08.08 |
| [J.S_DOM] 4. 스타일 변경하기 (style, classList) (0) | 2025.08.08 |
| [J.S_DOM] 3-1. 요소의 내용/속성 변경 예제 (1) | 2025.08.08 |