JavaScript NodeList forEach() Method

What You’ll Learn

The forEach() method of a NodeList calls your callback once for each node, in insertion order. Learn the callback parameters (currentValue, currentIndex, listObj), optional thisArg, and how it compares with entries() and for...of—with five examples and try-it labs.

Introduction

When you have a NodeList (from childNodes or querySelectorAll), forEach() is the callback-style way to visit every node. It feels familiar if you already know Array.forEach().

MDN’s classic idea: build a small tree, then call list.forEach(callback, thisArg) to log each node, its index, and the this value.

Understanding the forEach() Method

An instance method on NodeList that executes a callback for each node in the list, in insertion order.

• Returns — undefined.
• Callback args — currentValue, optional currentIndex, optional listObj.
• Optional thisArg — value used as this in a non-arrow callback.
• Does not build a new NodeList by itself.
• Baseline Widely available on MDN (since October 2017).

📝 Syntax

forEach(callback)
forEach(callback, thisArg)

Parameters

• callback — function run for each node. Receives:
  • currentValue — the current node
  • currentIndex (optional) — the index
  • listObj (optional) — the NodeList itself
• thisArg (optional) — value to use as this when running callback

Return value

undefined.

Typical pattern (MDN idea)

list.forEach(function (currentValue, currentIndex, listObj) {
  console.log(`${currentValue}, ${currentIndex}, ${this}`);
}, "myThisArg");

⚖️ forEach() vs Related Ideas

Examples Gallery

Examples follow MDN NodeList.forEach(). Labs use childNodes and querySelectorAll.

const node = document.createElement("div");
node.appendChild(document.createElement("p"));
node.appendChild(document.createTextNode("hey"));
node.appendChild(document.createElement("span"));

const list = node.childNodes;

list.forEach(function (currentValue, currentIndex, listObj) {
  console.log(`${currentValue}, ${currentIndex}, ${this}`);
}, "myThisArg");

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg

list.forEach((child, index) => {
  console.log(index, child.nodeName);
});

0 P
1 #text
2 SPAN

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

items.forEach((el, i) => {
  console.log(i, el.textContent);
});

0 Apple
1 Banana
2 Cherry

document.querySelectorAll(".item").forEach((el) => {
  el.classList.add("ready");
});

item ready count: 3

list.forEach((n, i) => {
  console.log("forEach", i, n.nodeName);
});

for (const [i, n] of list.entries()) {
  console.log("entries", i, n.nodeName);
}

forEach 0 P
forEach 1 #text
forEach 2 SPAN
entries 0 P
entries 1 #text
entries 2 SPAN

🚀 Common Use Cases

• Log or inspect every node in childNodes.
• Update all matches from querySelectorAll.
• Add classes, attributes, or listeners in bulk.
• Teach callback-style iteration next to Array forEach.
• Pass thisArg when a method needs a specific this.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since October 2017) — no Deprecated / Experimental / Non-standard banner.
• Returns undefined; takes a required callback and optional thisArg.
• childNodes includes text nodes—your callback may see #text.
• No early break; use for...of / entries() when you need to stop.
• Related learning: entries(), Array.forEach(), childNodes, JavaScript hub.

💡 Best Practices