자바스크립트 DOM 노드 접근 정리

DOM 노드에 대한 이해는 정밀한 DOM 조작의 핵심입니다. 이 글에서는 노드(Node)의 개념부터, nodeType 검사로 공백/텍스트 노드 문제 해결까지 한눈에 정리해드립니다.

---

✅ 노드 접근이란?

• 노드(Node): HTML의 모든 구성 요소 (요소, 텍스트, 속성, 주석 등)
• DOM 조작의 대상 = 노드
• 노드 간 계층적 관계를 통해 원하는 위치 탐색 가능

---

1️⃣ 노드 선택 방법

🔸 A. 태그 이름으로 선택

let items = document.getElementsByTagName("li");
items[0].style.color = "red";

• 반환: HTMLCollection → 인덱스로 접근 가능

🔸 B. 노드 간 관계로 접근

속성	설명
parentNode	부모 노드
childNodes	모든 자식 노드 (텍스트 포함)
children	요소 노드만 포함 (추천)
firstChild / lastChild	첫/마지막 자식 노드
nextSibling / previousSibling	형제 노드 접근

let firstNode = document.getElementById("list").firstChild;

⚠️ 줄바꿈(\n)은 #text 노드로 인식될 수 있으므로 주의

---

2️⃣ 노드 정보 확인

🔸 A. nodeName

노드의 이름(태그명/타입명) 반환 (읽기 전용)

노드	nodeName
문서 노드	#document
요소 노드	"DIV" 등 대문자
텍스트 노드	#text
주석 노드	#comment

console.log(document.body.nodeName); // "BODY"

🔸 B. nodeValue

노드	nodeValue
요소 노드	null
텍스트 노드	텍스트 문자열
속성 노드	속성 값

let txt = document.getElementById("title").firstChild.nodeValue;

🔸 C. nodeType

노드	코드
요소	1
속성	2
텍스트	3
주석	8
문서	9

let type = document.getElementById("title").firstChild.nodeType;

---

3️⃣ 공백 / 줄바꿈 문제 해결

문제: HTML 코드에 줄바꿈이 있으면 firstChild, lastChild가 텍스트 노드(#text)가 됨

<ul id="list">
  <li>1</li>
  <li>2</li>
</ul>

let ul = document.getElementById("list");
console.log(ul.lastChild); // #text일 수 있음!

✅ 해결: nodeType 체크

function findLastElementChild(parent) {
  let node = parent.lastChild;
  while (node && node.nodeType !== 1) {
    node = node.previousSibling;
  }
  return node;
}

---

🧠 실전 예시

<ul id="fruits">
  <li>🍎 사과</li>
  <li>🍌 바나나</li>
  <li>🍇 포도</li>
</ul>

let list = document.getElementById("fruits");
let node = list.lastChild;

while (node.nodeType !== 1) {
  node = node.previousSibling;
}
console.log(node.textContent); // "🍇 포도"

---

✅ 핵심 요약표

목적	속성/메서드	설명
노드 이름	nodeName	DIV, #text 등
노드 값	nodeValue	텍스트 노드 내용 등
노드 타입	nodeType	숫자로 반환 (1: 요소, 3: 텍스트 등)
부모/자식	parentNode, childNodes, children	트리 탐색
형제 탐색	nextSibling, previousSibling	공백도 포함됨
요소만 탐색	children, Element 전용 속성	nodeType === 1 검사

---

질문 정리

질문	답변
firstChild가 왜 텍스트일까요?	줄바꿈/공백은 텍스트 노드입니다
텍스트 노드 건너뛰려면?	nodeType === 1 조건으로 검사하세요
텍스트만 접근하려면?	el.firstChild.nodeValue
요소만 반복하려면?	el.children, for...of, forEach 사용