NodeList

NodeList is an interface in the Document Object Model (DOM) used to represent an ordered collection of Node objects. It is an array-like object that exposes a length property and an item(index) method for retrieving nodes by position. In most environments, a NodeList also supports numeric indexing (nodeList[0], nodeList[1], etc.), and it is often iterable, allowing forEach and for...of loops in modern browsers.

NodeLists are produced by various DOM APIs that return multiple nodes. Common examples include document.querySelectorAll(selectors), which returns a static NodeList containing all elements that match the selectors at the time of the call; and the childNodes property of a Node, which returns a live NodeList of all child nodes, including text and comment nodes. It is important to distinguish between static and live NodeLists: a static NodeList remains unchanged when the document is modified, whereas a live NodeList updates to reflect changes in the DOM.

Static versus live behavior is a key consideration for scripting. For instance, document.querySelectorAll(...) returns a static NodeList, while document.getElementsByTagName(...) returns a live NodeList that updates as elements are added or removed. This difference can affect how code behaves after DOM mutations.

Because a NodeList is not a true Array, it may lack some array methods. You can convert it to a standard Array with Array.from(nodeList) or the spread syntax [...nodeList], enabling the use of array methods such as map, filter, and reduce.

Compared to HTMLCollection, NodeList can include non-element nodes (for example, text nodes in the childNodes NodeList). HTMLCollection is generally live and typically contains only Element nodes. Understanding these distinctions helps in choosing appropriate DOM queries and handling dynamic content.