JavaScript HTML DOM Node List

NodeListThe object is a list of nodes (collection) obtained from the document.

The NodeList object is similar toHTMLCollectionobject.

Some methods in older browsers (such as:getElementsByClassName()) return a NodeList object, not an HTMLCollection object.

All browsers'childNodesthe property returns a NodeList object.

Most browsers'querySelectorAll()return a NodeList object.

The following code selects all <p> nodes in the document:

Examples

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

Elements in a NodeList can be accessed by index (starting at 0).

To access the second <p> element, you can use the following code:

y = myNodeList[1];

Try it Yourself »

NodeList object length property

The length property of the NodeList object defines the number of elements in the node list.

Examples

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

Try it Yourself »

Example Analysis

Get a collection of <p> elements:

var myNodelist = document.querySelectorAll("p");

Display the number of elements in the node list:

document.getElementById("demo").innerHTML = myNodelist.length;

The length property is often used to iterate over a node list.

Examples

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

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

Try it Yourself »

Difference between HTMLCollection and NodeList

HTMLCollectionis a collection of HTML elements.

NodeList is a collection of document nodes.

NodeList and HTMLCollection have many similarities.

Both NodeList and HTMLCollection are somewhat similar to Array objects, and you can use index (0, 1, 2, 3, 4, ...) to get elements.

Both NodeList and HTMLCollection have a length property.

HTMLCollection elements can be obtained by name, id, or index.

NodeList can only be accessed by index.

Only NodeList objects contain attribute nodes and text nodes.

A node list is not an array!

A node list may look like an array, but it is not.

You can use index to get elements just like an array.

Node lists cannot use array methods: valueOf(), pop(), push(), or join().

Other Extensions