This site is mobile accessible. Press the "Tap Here" button to use a larger font-size.

Smartphone icons created by Freepik - Flaticon

14.14 DOM Node Lists

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 <p> nodes in a document:

Example 1: JS HTML DOM - DOM Node Lists

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

The elements in the NodeList can be accessed by an index number.
To access the second <p> node you can write:

y = myNodeList[1];

Note: The index starts at 0.

HTML DOM Node List Length

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

Example 2: JS HTML DOM - DOM Node List Length part 1

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

Example explained:
1. Create a collection of all <p> elements
2. Display the length of the list
The length property is useful when you want to loop through the nodes in a node list:

Example 3: JS HTML DOM - DOM Node List Length part 2

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

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

The Difference Between an HTMLCollection and a NodeList

An HTMLCollection (previous chapter) is a collection of HTML elements.
A NodeList is a collection of document nodes.
A NodeList and an HTML collection is very much the same thing.
Both an HTMLCollection object and a NodeList object is an array-like list (collection) of objects.
Both have a length property defining the number of items in the list (collection).
Both provide an index (0, 1, 2, 3, 4, ...) to access each item like an array.
HTMLCollection items can be accessed by their name, id, or index number.
NodeList items can only be accessed by their index number.
Only the NodeList object can 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 loop through the node list and refer to its nodes like an array.
However, you cannot use Array Methods, like valueOf(), push(), pop(), or join() on a node list.

JavaScript Fundamentals course home
Module 14. JS HTML DOM

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
HTML DOM Methods JS HTML DOM - Finding HTML Element by Id JS HTML DOM - Finding HTML Elements by Tag Name part 1 JS HTML DOM - Finding HTML Elements by Tag Name part 2 JS HTML DOM - Finding HTML Elements by Class Name JS HTML DOM - Finding HTML Elements by CSS Selectors JS HTML DOM - Finding HTML Elements by HTML document.forms JS Changing HTML Content part 1 JS Changing HTML Content part 2 JS HTML DOM - Changing the Value of an Attribute JS HTML DOM - Dynamic HTML content JS HTML DOM - document.write() JS Validation - HTML Form Example part 1 JS Validation - HTML Form Example part 2 JS HTML DOM - Changing the HTML style JS HTML DOM - Changing the HTML style Using Events My first JS animation part 1 My first JS animation part 2 JS HTML Events - The onclick Attribute part 1 JS HTML Events - The onclick Attribute part 2 JS HTML Events - The onclick Attribute part 3 JS HTML Events - The onclick Attribute part 4 JS HTML Events - The onload Attribute JS addEventListener() part 1 JS addEventListener() part 2 JS addEventListener() part 3 JS addEventListener() part 4 JS addEventListener() part 5 JS addEventListener() part 6 JS addEventListener() part 7 JS addEventListener() part 8 JS removeEventListener() JS HTML Child Nodes and Node Values part 1 JS HTML Child Nodes and Node Values part 2 JS HTML Child Nodes and Node Values part 3 JS HTMLDOM - DOM Root Nodes part 1 JS HTMLDOM - DOM Root Nodes part 2 JS HTMLDOM - The nodeName Property JS HTMLDOM - The nodeType Property JS HTML DOM - Creating New HTML Elements (Nodes) JS HTML DOM - Creating new HTML Elements - insertBefore() JS HTML DOM - Removing Existing HTML Elements JS HTML DOM - Remove Child Element JS HTML DOM - Replacing an HTML Elements JS HTML DOM Collections JS HTML DOM Collections - HTMLCollection Length par 1 JS HTML DOM Collections - HTMLCollection Length part 2 JS HTML DOM - DOM Node Lists JS HTML DOM - DOM Node List Length part 1 JS HTML DOM - DOM Node List Length part 2