Introduction to NodeList in JavaScript

Introduction to NodeList in JavaScript

A NodeList object is a essentially collection of nodes (DOM elements) taken from the HTML document. It is very much like an array but doesn't support array methods since NodeLists and arrays are two completely different things.

In this article, you will learn what is a NodeList, and how you can use it in JavaScript to iterate over a list of DOM elements. The tutorial also covers the difference between a NodeList and an HTMLCollection briefly.

Live vs. Static NodeList

A NodeList can be live or static, which means the changes to the DOM are either applied automatically to the collection or don't affect the elements of the collection at all.

The querySelectorAll() method returns a static NodeList, while the Node.childNodes property returns a live NodeList.

Here is an example of live NodeList:

const parent = document.getElementById('sidebar');

// collect children (return Live NodeList)
let childNodes = parent.childNodes;

// print length (assume '1')
console.log(childNodes.length); 

// add a new Node to parent
parent.appendChild(document.createElement('div'));

// print length again (output '2')
console.log(childNodes.length);

It's good to remember this distinction when you decide to iterate over a NodeList.

Creating a NodeList

The querySelectorAll() method can be used to extract a JavaScript NodeList object from the document. The following example selects all <div> elements in the document:

const divs = document.querySelectorAll('div');

To select a specific node from the NodeList collection, just use the index number (starts at 0):

// select 3rd node in NodeList
const div = document.querySelectorAll('div')[2];

Length of the NodeList

The number of nodes inside a NodeList object can be accessed through the NodeList.length property:

const paragraphs = document.querySelectorAll('p');

// print NodeList length
console.log(paragraphs.length);

The length property can be highly useful while iterating over a NodeList using the traditional for loop:

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
for (let i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerText);
}

Iterating over a NodeList

There are several ways to iterate over a NodeList object in JavaScript. The simplest and easiest way is to use the forEach() method. It executes the given function once for each element in the NodeList collection:

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
paragraphs.forEach((p, index) => {
    console.log(p.innerText);
});

Modern browsers also support entries(), keys(), and values() methods on a NodeList object. Take a loop at this guide to learn about more ways of iterating over DOM elements in JavaScript including the latest for...of loop.

NodeLists vs. Arrays

A NodeList may look like an array, but in reality, both are two different things. You can iterate through a NodeList using forEach() and directly access its nodes using an index value, just like an array.

However, you can not use array methods like push(), pop(), join(), and valueOf() for a NodeList. A NodeList can be converted to a real array using the Array.from() method (only works in modern browsers).

NodeList vs. HTMLCollection

A NodeList and an HTMLCollection are very much the same thing. An HTMLCollection is basically a collection of HTML elements, while a NodeList object consists of element nodes. So both these collections refer to the same things - HTML elements.

They both have a length property to get the total number of items inside the collection, each of which is accessible using an index number as an array. However, besides index number, the items inside the HTMLCollection can be accessed through their name and ID, something that is not possible with a NodeList object.

Likewise, the NodeList object can contain attribute and text nodes. That is not the case with JavaScript's HTMLCollection.

One more similarity between a NodeList and an HTMLCollection is that they are not arrays, so you can use the array methods like push(), pop(), join(), and valueOf() for HTMLCollection too.

Summary

In this article, we look at the NodeList object and how to use it in JavaScript. In short:

• A NodeList is a collection of element nodes (DOM elements).
• A NodeList can be live or static, which means that modifications to DOM elements are either applied right away to the collection or completely ignored.
• The document.querySelectorAll() method can be used to create a static NodeList in JavaScript.
• You can display the total number of nodes inside a NodeList by using the length property.
• JavaScript provides several ways to iterate over a NodeList object. The easiest one is the forEach() method.
• A NodeList is not an array, so common array methods will not work for it.
• A NodeList is very much similar to an HTMLCollection, except that NodeList items are only accessible through their index number (0, 1, 2, ....), while an HTMLCollection elements can be accessed with an index number, name, or ID.

const parent = document.getElementById('sidebar');

// collect children (return Live NodeList)
let childNodes = parent.childNodes;

// print length (assume '1')
console.log(childNodes.length); 

// add a new Node to parent
parent.appendChild(document.createElement('div'));

// print length again (output '2')
console.log(childNodes.length);

const divs = document.querySelectorAll('div');

// select 3rd node in NodeList
const div = document.querySelectorAll('div')[2];

const paragraphs = document.querySelectorAll('p');

// print NodeList length
console.log(paragraphs.length);

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
for (let i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerText);
}

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
paragraphs.forEach((p, index) => {
    console.log(p.innerText);
});

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript