[Javascript] Node vs Element

Javascript에서 Node 와 Element의 차이를 알아보자

Node

html 상의 모든 종류의 component들
ex) comment, element, text, document

Node를 반환하는 Method들에는 childNodes, parentNode 등이 있다.

Element

node 중에서 Element 타입의 노드

Element 반환하는 Method들에는 children, parentElement, querySelector, getElementById 등이 있다.

javascript 작업시 element가 필요한 경우가 대부분이다.
따라서 (대부분의 경우) node 보다는 element로 작업하는 것이 좋을 것이다.

+

htmlCollection vs NodeList

여러 메소드를 사용하여 여러개의 결과값을 받을 때에 htmlCollection혹은 NodeList의 형태로 결과가 받아질 때가 있다.
htmlCollection의 live update가 작용한다는 점은 버그를 야기하기 쉬우므로, htmlCollection 보다는 NodeList를 이용하여 작업하는게 나을 것이다.

	htmlCollection	NodeList
Array Methods	사용 불가	사용 가능
live updates	작동 O	작동 X
예시	getElementsByClassName, getElementsByTagName	querySelectorAll