JavaScript NodeList entries() Method

What You’ll Learn

The entries() method of a NodeList returns an iterator of key/value pairs. Each pair is [index, node], where the value is a Node. Learn for...of, destructuring, childNodes and querySelectorAll demos, and how it compares with keys(), values(), and forEach()—with five examples and try-it labs.

Introduction

A NodeList is a collection of DOM nodes—for example element.childNodes or the result of document.querySelectorAll("li"). Sometimes you need both the index and the node while looping.

list.entries() gives you that: an iterator of [index, node] pairs, similar in spirit to Array.entries().

Understanding the entries() Method

An instance method on NodeList that returns an iterator over all key/value pairs in the list. The values are Node objects.

• Returns — an iterator (not an array).
• Each step — [index, node].
• Parameters — none.
• Does not mutate the NodeList or the DOM by itself.
• Baseline Widely available on MDN (since October 2017).

📝 Syntax

Call the method on a NodeList:

entries()

Parameters

None.

Return value

An iterator. Each yielded value is a two-item array: [index, node].

Typical pattern (MDN idea)

const list = node.childNodes;

for (const entry of list.entries()) {
  console.log(entry);
  // e.g. [0, 
], [1, #text "hey"], [2, ]
}

⚖️ entries() vs Related Ideas

Examples Gallery

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

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

const list = node.childNodes;

for (const entry of list.entries()) {
  console.log(entry);
}

0 → P
1 → #text "hey"
2 → SPAN

for (const [index, child] of list.entries()) {
  console.log(index, child.nodeName);
}

0 P
1 #text
2 SPAN

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

for (const [i, el] of items.entries()) {
  console.log(i, el.textContent);
}

0 Apple
1 Banana
2 Cherry

const pairs = Array.from(list.entries());
console.log(pairs.length);
console.log(pairs[0][0], pairs[0][1].nodeName);

length: 3
0 P

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

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

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

🚀 Common Use Cases

• Number children while walking childNodes.
• Label querySelectorAll matches with their index.
• Build debug logs of [index, nodeName] pairs.
• Convert pairs with Array.from for further processing.
• Teach iterators alongside Array entries().

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since October 2017) — no Deprecated / Experimental / Non-standard banner.
• Returns an iterator; values are Node objects.
• childNodes includes text nodes—expect #text entries when whitespace or text is present.
• Does not mutate the DOM by itself.
• Related learning: childNodes, Array.entries(), appendChild(), JavaScript hub.

💡 Best Practices