childNodes vs children

childNodes vs children의 핵심 차이

기본 개념

// HTML 구조 예시
const div = document.createElement('div');
div.innerHTML = `
    첫 번째 텍스트
    <p>단락 1</p>
    <!-- 주석입니다 -->
    <span>스팬 요소</span>
    마지막 텍스트
`;

// childNodes: 모든 종류의 자식 노드 (NodeList)
console.log(div.childNodes);
// NodeList(9) [
//   text (줄바꿈과 공백),
//   text ("첫 번째 텍스트"),
//   text (줄바꿈과 공백),
//   p,
//   text (줄바꿈과 공백),
//   comment ("주석입니다"),
//   text (줄바꿈과 공백),
//   span,
//   text ("마지막 텍스트")
// ]

// children: HTML 요소만 (HTMLCollection)
console.log(div.children);
// HTMLCollection(2) [p, span]

핵심 정리:

• childNodes: 모든 것 (텍스트, 주석, 요소) → 정밀한 DOM 조작
• children: HTML 요소만 → 일반적인 웹 개발
• 대부분의 경우 children이 더 편리하고 직관적
• DOM의 정확한 구조가 중요할 때만 childNodes 사용