Node는 DOM을 구성하는 가장 기본적인 구성 단위
"Document Node"는 HTML 문서 전체를 나타내는 루트 노드
"Element Node"는 HTML 태그를 나타내고,
"Text Node"는 텍스트 내용을,
"Comment Node"는 주석을 나타냄
이처럼 Node는 Dom트리의 모든 구성 요소를 포함하는 포괄적인 개념
반면
Element는 Node의 특정 타입 중 하나, HTML이나 XML 태그로 표현되는 객체
쉽게 말해, 모든 Element는 Node이지만, 모든 Node가 Element인 것은 아님
Element는 id, class, style과 같은 HTML 속성을 가질 수 있으며, querySelector()나 getElementsByClassName()과 같은 메서드를 사용할 수 있다는 특징이 있음.
ex)
<div>Hello<!--주석-->World</div>라는 HTML이 있다면, div 태그는 Element Node이면서 동시에 Node임.
반면 'Hello'와 'World'라는 텍스트는 Text Node이며, 주석은 Comment Node임.
이들은 모두 Node이지만 Element는 아님
Node 와 Element의 차이와 관련된 구체적인 예시
ex - textContent라는 속성은 Node의 속성이므로 모든 종류의 Node에서 사용 가능하지만, innerHTML은 Element의 속성이므로 Element에서만 사용할 수 있음
또한, childNodes와 children 속성에서도 차이가 있음
Node의 속성인 childNodes는 주어진 요소의 모든 자식 Node를 포함하는 NodeList를 반환
여기엔 Element뿐만 아니라 모든 종류의 Node가 포함됨
따라서 HTML 태그 뿐 아니라 텍스트, 주석도 childNodes에 포함됨
반면
Element의 속성인 children은, Element타입의 자식 노드만을 포함하는 HTMLCollection을 반환함
여기에는 텍스트 노드나 주석 노드는 제외되고 HTML 요소 노드만 포함됨
