Node와 Element의 차이점

답변 확인

• Node와 Element는 DOM(Document Object Model) 에서 HTML 문서를 구성하는 중요한 개념
• 두 개념은 서로 관련이 있지만, Element는 Node의 특정 타입 중 하나라는 점에서 차이

1. Node란?

• Node(노드) 는 DOM을 구성하는 가장 기본적인 단위
• HTML 문서의 모든 구성 요소(태그, 텍스트, 속성, 주석 등)를 포함하는 포괄적인 개념

✅ Node의 주요 타입

📌 즉, Node는 HTML 문서의 모든 요소를 포함하는 가장 상위 개념

2. Element란?

• Element(요소) 는 Node의 한 종류로, HTML 태그(<div>, <p>, <h1> 등)를 의미하는 특수한 타입

• Element는 HTML 속성(id, class, style 등)을 가질 수 있으며, querySelector(), getElementsByClassName() 같은 메서드를 사용할 수 있음

• 📌 모든 Element는 Node이지만, 모든 Node가 Element는 아니다

• Element는 오직 HTML 태그(<div>, <span>, <img>등)만 포함하며, 텍스트, 속성, 주석은 포함되지 않음

3.Node와 Element의 차이점

💡 예제 코드

<div id="container">
  Hello
  <!-- 주석 -->
  World
</div>

위 HTML 구조에서:

• <div> 태그는 Element Node이면서 Node입니다.
• "Hello"와 "World"는 Text Node입니다.
• <!-- 주석 -->은 Comment Node입니다.

📌 즉, div는 Element이자 Node이지만, 텍스트와 주석은 Node이지만 Element가 아님

✅ Node vs Element 비교

4. Node와 Element의 차이를 보여주는 속성

1️⃣ textContent vs innerHTML

const div = document.getElementById('container');
 
console.log(div.textContent); // "Hello World" (모든 Node에서 사용 가능)
console.log(div.innerHTML); // "Hello <!-- 주석 --> World" (Element에서만 사용 가능)

• ✅ textContent: Node의 속성이므로 모든 Node에서 사용 가능
• ✅ innerHTML: Element의 속성이므로 Element에서만 사용 가능

2️⃣ childNodes vs children

console.log(div.childNodes); // NodeList(3) [text, comment, text]
console.log(div.children); // HTMLCollection [div]

• ✅ childNodes: 모든 자식 Node(텍스트, 주석 포함) 반환
• ✅ children: Element만 포함하는 HTMLCollection 반환 (텍스트, 주석 제외)

🔹 결론

• ✔ Node는 HTML 문서의 모든 개체(태그, 텍스트, 속성, 주석 등)를 포함하는 가장 큰 개념
• ✔ Element는 Node 중에서도 HTML 태그(<div>, <p> 등)만 포함하는 특정 개념
• ✔ 모든 Element는 Node이지만, 모든 Node가 Element는 아니다!
• Node는 textContent, childNodes 등을 사용할 수 있지만, Element에서만 innerHTML, children을 사용할 수 있음

참고 자료

• [뉴렉처] Node와 Element Node, 그리고 childNodes, children