? JavaScript DOM NodeLists

⚡ Quick Overview

A NodeList is an array-like collection of DOM nodes. It is most commonly returned by methods like querySelectorAll() and childNodes, and can contain element nodes, text nodes, or even comment nodes, depending on how it was created.

• NodeLists are array-like, but not real arrays.
• They often come from DOM query methods.
• Some NodeLists are static, while HTMLCollections are usually live.
• You can loop over NodeLists using forEach(), for, or for...of.

? Key Concepts

• NodeList – an ordered collection of DOM nodes.
• Source methods – e.g. document.querySelectorAll(), node.childNodes.
• length – property that tells how many nodes are in the list.
• Iteration support – forEach(), for...of, and classic for loops.
• item(index) – method to get a node at a specific index.
• entries(), keys(), values() – iterable helpers for NodeLists.
• NodeList vs HTMLCollection – NodeList can contain any node type; HTMLCollection contains only element nodes.

? Syntax & Theory

You usually obtain a NodeList by querying the DOM. Two very common ways are:

• document.querySelectorAll(selector) – returns a static NodeList of matched elements.
• element.childNodes – returns a NodeList of all child nodes (elements, text, comments).

A NodeList behaves similarly to an array, but is not a real array:

• Has numeric indexes: nodes[0], nodes[1], etc.
• Has length and item().
• Does not have full array methods like map(), filter(), etc., unless converted.

? Code Examples

? Getting a NodeList with querySelectorAll()

<div>Item 1</div>
<div>Item 2</div>

<script>
const items = document.querySelectorAll("div");
console.log(items); // NodeList of div elements
console.log(items.length); // number of divs
console.log(items.item(0)); // first div element
</script>

? Looping Over a NodeList

const items = document.querySelectorAll("div");

// Using forEach (modern browsers)
items.forEach(item => {
  item.style.backgroundColor = "lightblue";
});

// Using for...of
for (const item of items) {
  console.log(item.innerText);
}

// Using classic for loop
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

? NodeList vs HTMLCollection

<ul id="list">
  <li>One</li>
  <li>Two</li>
</ul>

<script>
const nodeList = document.getElementById("list").childNodes;
const htmlCollection = document.getElementById("list").children;

console.log("NodeList:", nodeList); // Includes text nodes (e.g. whitespace)
console.log("HTMLCollection:", htmlCollection); // Only <li> elements
</script>

? Converting NodeList to an Array

const listItems = document.querySelectorAll("li");

// Using spread syntax
const arr1 = [...listItems];

// Using Array.from()
const arr2 = Array.from(listItems);

// Now you can use array methods like map, filter, etc.
arr1.map(el => {
  el.style.color = "red";
});

? NodeList vs HTMLCollection Overview

?️ Interactive Example

Below is a simple interactive example. When you click the button, it selects all list items using querySelectorAll() (NodeList) and highlights them.

? Live Output & Explanation

When you run the earlier examples in a browser:

• console.log(items) prints a NodeList object, showing each matched node with an index.
• items.length tells you how many nodes were selected.
• Looping with forEach(), for...of, or a classic for allows you to read or modify each node.
• Using childNodes shows extra text nodes (like whitespace), while children only shows the element nodes.
• After converting a NodeList to an array, you can safely use powerful array helpers like map(), filter(), and reduce().