What is diffrence between Element and Node in DOM?
Element vs Node 차이점
HTML을 구성하는 요소를 Element 혹은 Node 라고 부른다. 비슷하게 들리지만 Element와 Node는 분명히 다른 개념이다. Element와 Node 모두 Javascript의 Object 객체를 상속받는 객체지만, 상속 체인의 관점으로 봤을 때 Node가 Element의 상위 개념이 된다.
Node
먼저 상위 개념인 Node를 알아보자.
Node는 태그노드와 텍스트 노드 전체를 가리킨다. 사용자에게 렌더링 되는 DOM은 HTML 소스가 불안정하더라도 일부 수정한뒤 사용자에게 렌더링 하게 된다. DOM은 Node의 계층 구조로 구성된다. 노드는 시맨틱 태그(일반적인 <p> <div> 등)과 텍스트를 모두 아우르는 개념이다.
Node 객체는 아래 처럼 구성되어 있다. 새로운 객체를 생성하거나 특정 DOM 객체를 생성해서 상속 체인을 따라가다 보면 Node 객체를 찾을 수 있다.
주요 프로퍼티를 보면 전체 Document Tree를 표현하는 DUMENT_NODE, 텍스트를 표현하는 TEXT_NODE, 특정 엘레멘트를 표현하는 ELEMENT_NODE 등을 소유하고 있다.
Element
Element는 Node 객체를 상속받는 Element 객체를 의미한다. 말이 좀 이상한데, Node 객체 중에서 ELEMENT_NODE를 의미한다. 즉 텍스트 노드는 Element에 포함되지 않는다.
<div><body><span> 태그들은 모두 Element가 된다. 하지만 전체 document tree나 주석, 텍스트들은 HTML 태그로 표현되지 않기 때문에 Element에 속하지 않는다.
정리
DOM에서 CRUD를 구현할 때 사용하는 classList, setAttribute(), appendChild(), remove() 메소드 들은 Element 객체와 Node 객체로 구분된다. 사용하고자 하는 객체가 어떤 객체에 속하는지 구분하고 적절하게 사용할 수 있어야 한다.
예를 들어 classList는 Element의 프로퍼티다. 즉, HTML태그로 감싸져 있는 Element에서 사용할 수 있는 메소드라는 것이다. Element와 Node 차이점을 보기 위해서 DIV 객체를 생성하고, "hello world" 텍스트를 추가한다.
Element의 프로퍼티인 children과 Node의 프로퍼티인 childNodes를 찍어보면 전자의 경우 Text를 제외한 결과값을 출력하는 반면, 후자는 Text를 포함한 결과를 출력한다.
const el = document.createElement("div");
console.log(el.children); // HTMLCollection
console.log(el.childNodes); // NodeList
결론은 Node는 Element의 상위 개념이다.
'Programming' 카테고리의 다른 글
| [Javascript] Function Expression vs Declaration 함수 표현식 vs 함수 선언식 차이점 (0) | 2022.05.15 |
|---|---|
| [Javascript] onclick VS addEventListener 차이점? (0) | 2022.05.15 |
| [Javascript] DOM 이란? (feat CRUD 구현하기) (0) | 2022.05.15 |
| [Javascript] prototype 이란? (0) | 2022.05.14 |
| [Javascript] __proto__ 접근자 프로퍼티 이해하기 (0) | 2022.05.14 |
댓글