HTML DOM NodeList Reference Manual

NodeList

NodeList is a collection of node objects similar to an array (list).

Nodes in NodeList can be accessed by index (starting from 0).

length propertyReturn the number of nodes in NodeList.

NodeList vs. HTMLCollection

NodeList vs. HTMLCollection Almost the same.

See the instructions below the page.

Who returns NodeList?

childNodes property

querySelectorAll() method

getElementsByName() method

Properties and Methods

The following properties and methods can be used on NodeList:

Name Description
entries() Return an iterator with key/value pairs from the list.
forEach() Execute a callback function for each node in the list.
item() Return the node at the specified index.
keys() Return an iterator using the keys in the list.
length Return the number of nodes in NodeList.
values() Return an iterator using the values in the list.

instances

Select all <p> Node:

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

Elements in NodeList can be accessed by index number.

To access the second <p> node, you can write:

myNodeList[1]

Try it yourself

Note:The index starts from 0.

HTML DOM Node List Length

length The attribute defines the number of nodes in the node list:

Example 1

myNodelist.length

Try it yourself

When you want to iterate through the nodes in the node list,length The attribute is very useful:

Example 2

Change the color of all <p> elements in the node list:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Try it yourself

Not an array

NodeList is not an array!

NodeList may look like an array, but it is not.

You can iterate over NodeList and use index references to its nodes.

But you cannot use array methods on NodeList, such as push(), pop(), or join().

Differences between HTMLCollection and NodeList

NodeList with HTMLcollection very similar.

Both are collections of nodes (elements) extracted from the document, similar to arrays. Nodes can be accessed by index number. The index starts from 0.

Both have length property, which returns the number of elements in the list (collection).

HTMLCollection isDocument elementcollection.

NodeList isDocument nodecollection of (element nodes, attribute nodes, and text nodes).

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

NodeList items can only be accessed by their index number.

HTMLCollection is always aLivecollection. For example: if a <li> element is added to the list in the DOM, the list in the HTMLCollection will also change.

NodeList is usually aStaticcollections. For example: if a <li> element is added to the list in the DOM, the list in the NodeList will not change.

getElementsByClassName() and getElementsByTagName() The method returns a live HTMLCollection.

querySelectorAll() The method returns a static NodeList.

childNodes The property returns a live NodeList.

live node list

In some cases, NodeList isLive: Changes in the DOM will update the NodeList.

childNodes The method returns a live NodeList.