JavaScript NodeList forEach() Method

Beginner
5 min read
Updated: Nov 2026
5 examples
Method
Decorative image with the word FOREACH

Definition

NodeList.forEach() calls your callback once for each node, in insertion order (MDN). It returns undefined — use it for side effects, not to build a new list.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call nodeList.forEach. Start with this line.

JavaScript
nodeList.forEach(callback, thisArg?)
CallWhat it does
nodeList.forEach(callback, thisArg?)Primary signature.
nodeList.forEach(...)Call with the arguments your case needs.

Built into the browser. Call forEach(...) on a NodeList — no import required.

Library declarations
JavaScript
nodeList.forEach(callback, thisArg?)

Parameters

ParameterDescription
callbackRequired. Runs once per node

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Basic Callback

Run a function once for each child node.

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

const names = [];
node.childNodes.forEach(function (child) {
  names.push(child.nodeName);
});
console.log(names.join(", ")); // P, #text, SPAN
Try It Yourself

How It Works

  1. Create a parent. Append three child nodes.
  2. Call forEach. Pass one callback function.
  3. Receive the node. First parameter is currentValue.
  4. Collect names. Side effect only — return is still undefined.

Example 2 — Use the Index

The second callback argument is the zero-based index.

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

const lines = [];
node.childNodes.forEach(function (child, index) {
  lines.push(index + "→" + child.nodeName);
});
console.log(lines.join(" | ")); // 0→P | 1→SPAN
Try It Yourself

How It Works

  1. Second parameter. currentIndex starts at 0.
  2. Pair with the node. Useful for numbered labels.
  3. Third parameter. The NodeList itself (rarely needed).
  4. Tip. Same callback shape as Array.forEach().

Example 3 — querySelectorAll

Static NodeLists from selectors also support forEach().

JavaScript
// Imagine: <ul id="fruit"><li>Apple</li><li>Banana</li><li>Cherry</li></ul>
const items = document.querySelectorAll("#fruit li");
const lines = [];

items.forEach(function (el, i) {
  lines.push(i + ": " + el.textContent);
});
console.log(lines.join(", ")); // 0: Apple, 1: Banana, 2: Cherry
Try It Yourself

How It Works

  1. Select elements. querySelectorAll returns a NodeList.
  2. Call forEach. Same API as childNodes.
  3. Read text. Use the element in the callback.
  4. Static list. Unlike live childNodes, this snapshot does not grow if you add more <li> later.

Example 4 — thisArg

MDN pattern: pass a second argument used as this in a regular function.

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

const lines = [];
node.childNodes.forEach(function (child, index) {
  lines.push(child.nodeName + " @ " + index + " this=" + this);
}, "ctx");

console.log(lines.join(" | "));
// P @ 0 this=ctx | SPAN @ 1 this=ctx
Try It Yourself

How It Works

  1. Pass thisArg. Second argument to forEach.
  2. Use a regular function. Arrow functions ignore thisArg.
  3. Read this. Inside the callback it equals "ctx".
  4. Modern tip. Closures or bound methods are often clearer than thisArg.

Example 5 — vs entries()

Same NodeList — callback style vs for...of pairs.

JavaScript
const node = document.createElement("div");
node.appendChild(document.createElement("p"));
node.appendChild(document.createElement("span"));
const list = node.childNodes;

const a = [];
list.forEach(function (n, i) {
  a.push("forEach " + i + " " + n.nodeName);
});

const b = [];
for (const [i, n] of list.entries()) {
  b.push("entries " + i + " " + n.nodeName);
}

console.log(a.join(", "));
console.log(b.join(", "));
// forEach 0 P, forEach 1 SPAN
// entries 0 P, entries 1 SPAN
Try It Yourself

How It Works

  1. forEach — runs a callback immediately.
  2. entries() — lazy pairs for for...of.
  3. Same order. Both walk insertion order.
  4. Pick for...of when you need break or continue.
Compatibility

Browser Support

NodeList.forEach() is marked Baseline Widely available on MDN (since October 2017). DOM API — not a Node.js built-in.

✓ Baseline · Widely available

forEach()

Run a callback for each node in a NodeList across modern browsers.

98% Core tag support
Chrome 51+
Full support
Edge 16+
Full support
Firefox 50+
Full support
Safari 10+
Full support
Opera 38+
Full support
HTML element 100% supported

Bottom line: Safe for production. Prefer forEach for simple callbacks; use for...of / entries() when you need break.

Frequently Asked Questions

It calls your callback once for each node in the NodeList, in insertion order. The callback receives currentValue (the node), currentIndex, and the list itself.
No. MDN marks NodeList.forEach() as Baseline Widely available (since October 2017). It is not Deprecated, Experimental, or Non-standard.
undefined. It runs side effects in the callback; it does not build a new list.
An optional second argument used as this inside the callback when you pass a regular function. Arrow functions do not bind their own this, so thisArg has no effect with arrows.
forEach() runs a callback immediately for each node. entries() returns a lazy iterator of [index, node] pairs for for...of or Array.from.
No convenient break. Use for...of (optionally with entries()) or a classic for loop when you need to stop early.

Next: item()

Read a single node from the list by its index.

item() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript NodeList entries() Method JavaScript NodeList item() Method