Tutorial on JavaScript List: JavaScript NodeList Explained

The JavaScript node list is a collection of DOM elements. The NodeList can be live or static, which means that modifications to the DOM are either automatically applied to collections or do not affect them at all.

In this tutorial, you will learn all about JavaScript NodeList, what it is and how to navigate it. You should understand why NodeList is not an array, and learn the ways to specify the length of collections. The tutorial will cover the differences between a JavaScript NodeList and an HTMLCollection too.

You will learn how to select elements in an HTML page with a querySelectorAll() method creating a JavaScript NodeList, as well as how to choose a particular node within it. You will also read about the length property and how to use it within a loop.

NodeList: Main Tips

• A collection of nodes is called a node list.
• A node list should not be confused with an array. Array methods will not work on a node list.
• A JavaScript NodeList can be created using querySelectorAll() method.
• You can get the number of nodes in a list with a length property, which is really useful in loops.
• NodeList is similar to HTMLCollection, but JavaScript NodeList items can only be accessed with their index number, while an HTMLCollection item can be accessed with a name, ID, or an index number.

What's the NodeList?

A node list is essentially a collection of nodes and is very much like an array, but does not support array methods. The method called querySelectorAll() is used to return a JavaScript NodeList object.

The code example below will select all <p> nodes in the document:

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

Now, the code below will select the second <p> node in the document:

b = nodeList[1];

Note: Keep in mind that the index begins at 0 in node lists.

Length of the List

To specify how many nodes a JavaScript list contains, you will need to use the length property:

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

First, the code you see in the example above gets each <p> element in the NodeList. Then, it displays the length of the JavaScript NodeList.

The length property can be extremely useful when looping through a NodeList:

var nodeList = document.getElementsByTagName("p");
var i;  
for (i = 0; i <	nodeList.length; i++) {
    nodeList[i].style.backgroundColor = "green";  
}

NodeList vs. HTMLCollection

JavaScript NodeList is nearly the same as HTMLCollection. Both of their items refer to HTML elements: HTMLCollection is a collection of HTML elements, while a NodeList is a collection of element nodes.

They both have a length property to display the number of items in a collection, each of which can be accessed by their index number. However, in addition to that, HTMLCollection items can also be accessed by their name and ID. That is not the case with JavaScript NodeList.

On the other hand, JavaScript list collection can contain attribute nodes as well as text nodes. That is not possible when using HTMLCollection.

HTMLCollection and NodeList are not arrays, so they do not work with array methods like push(), pop(), join() or valueOf(). However, you can loop through them.

NodeList: Summary

• A node list is a collection of nodes. It should not be confused with arrays.
• JavaScript NodeList is similar to HTMLCollection, but NodeList items can only be targeted with their index number.
• You can use querySelectorAll() method to get a JavaScript NodeList.
• The length property is used to get the number of nodes in a list. It is very useful in looping.