Node vs Element

Nodelist 와 HTML collection 를 비교하기전에 node 와 element를 비교하면

A node is the generic name for any type of object in the DOM hierarchy. A node could be one of the built-in DOM elements such as document or document.body, it could be an HTML tag specified in the HTML such as input tag or p tag or it could be a text node that is created by the system to hold a block of text inside another element.

___So, in a nutshell, a node is any DOM object.

____An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).

The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling. That structure forms a tree-like hierarchy. The document node has the html node as its child. The html node has its list of child nodes (the head node and the body node). The body node would have its list of child nodes (the top level elements in your HTML page) and so on.

NodeList vs HTML collection

일단 NodeList 와 Element 는 겉으로 보기에 배열과 비슷하다.

reason? 둘다 배열로 표기되기 때문. 하지만 둘다 배열은 아님.

length 프로퍼티는 가지고 있음.

BUT

NodeList와 HTML collection은 배열 처럼 보이는 것이지, 정작 배열의 Method() 를 사용할 수는 없음.

Loop 할수는 있으나 push() pop() join() ...etc method 는 사용이 불가함.

- HTML collection

1. collection of elements

2. HTMLCollection items can be accessed by their name, id, or index number.

3. An HTMLCollection is always a live collection. Example: If you add a list element to a list in the DOM, the list in the HTMLCollection will also change.

- NodeList

1. collection of Nodes(element nodes, attribute nodes, and text nodes).

2. NodeList items can only be accessed by their index number.

3. A NodeList is most often a static collection. Example: If you add a list element to a list in the DOM, the list in NodeList will not change.

The getElementsByClassName() and getElementsByTagName() 라이브 HTML collection return

The querySelectorAll() 정적 NodeList return

The childNodes property 라이브 NodeList return

Live Collection 의 개념

These

document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()

are live because they are observers of internal collections maintained by engines. That maintenance is not strictly required but is easy to achieve.

document.querySelectorAll() 

is not live because result gets computed each time you request it. Maintenance of live collection is too expensive as each modification (content, attributes, classes) of the DOM in this case will require re-evaluation of each element in the collection - O(N*M) task where N is the number of all elements in the DOM (worst case) and M number of active querySelectorAll() collections.

Reference

node, element
https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object#:~:text=So%2C%20in%20a%20nutshell%2C%20a,and%20a%20nextSibling%20and%20previousSibling.

live collection
https://stackoverflow.com/questions/32486199/whats-the-difference-between-live-and-not-live-collection-in-javascript-selecto#:~:text=A%20live%20is%3A%20when%20the,an%20HTMLCollection%2C%20and%20is%20live.

HTMLcollection, NodeList
https://www.w3schools.com/js/js_htmldom_nodelist.asp#:~:text=The%20Difference%20Between%20an%20HTMLCollection%20and%20a%20NodeList&text=Both%20are%20array%2Dlike%20collections,in%20the%20list%20(collection).