JavaScript HTML DOM Node Lists

The HTML DOM NodeList Object

A NodeList object is a list (collection) of nodes extracted from a document.

A NodeList object is almost the same as an HTMLCollection object.

Some (older) browsers return a NodeList object instead of an HTMLCollection for methods like getElementsByClassName().

All browsers return a NodeList object for the property childNodes.

Most browsers return a NodeList object for the method querySelectorAll().

The following code selects all nodes in a document:

Example

const myNodeList = document.querySelectorAll("p");

Note: The index starts at 0.

HTML DOM Node List Length

The length property defines the number of nodes in a node list:

Example

myNodelist.length

The length property is useful when you want to loop through the nodes in a node list:

Example

```javascript const myNodelist = document.querySelectorAll("p");

for (let i = 0; i element to a list in the DOM, the list in the HTMLCollection will also change.

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

The getElementsByClassName() and getElementsByTagName() methods return a live HTMLCollection.

The querySelectorAll() method returns a static NodeList.

The childNodes property returns a live NodeList.