JavaScript NodeList values() Method

What You’ll Learn

The values() method of a NodeList returns an iterator of Node objects. Learn for...of over list.values(), how it compares to plain for...of list, keys(), and entries()—with five examples and try-it labs.

Introduction

A NodeList holds an ordered collection of DOM nodes. list.values() lets you walk those nodes one by one through an iterator—each step gives you the next Node, not an index number.

MDN’s classic setup: three children in a div produce <p>, a text node "hey", and <span> when you log each value from childNodes.

Understanding the values() Method

An instance method on NodeList that returns an iterator over all values in the list. The values are Node objects (elements, text nodes, comments, etc.).

• Returns — an iterator (not an array).
• Each step — the next Node in order.
• 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:

values()

Parameters

None.

Return value

An iterator. Each yielded value is a Node.

Typical pattern (MDN idea)

const list = node.childNodes;

for (const value of list.values()) {
  console.log(value);
  // <p>, #text "hey", <span>
}

⚖️ values() vs Related Ideas

Examples Gallery

Examples follow MDN NodeList.values(). 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;

for (const value of list.values()) {
  console.log(value);
}

<p>
#text "hey"
<span>

for (const value of list.values()) {
  console.log(value.nodeName);
}

P
#text
SPAN

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

for (const value of items.values()) {
  console.log(value.textContent);
}

Apple
Banana
Cherry

const nodes = Array.from(list.values());
console.log(nodes.length, nodes.map(n => n.nodeName));

3 ["P", "#text", "SPAN"]

for (const value of list.values()) {
  console.log("value", value.nodeName);
}

for (const key of list.keys()) {
  console.log("key", key);
}

value P
value #text
value SPAN
key 0
key 1
key 2

🚀 Common Use Cases

• Walk nodes with for...of and early break.
• Convert a NodeList to an array of nodes with Array.from.
• Process matched elements from querySelectorAll.
• Teach iterator methods alongside Array values().
• Compare node iteration with keys() and entries().

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since October 2017) — no Deprecated / Experimental / Non-standard banner.
• Returns an iterator; yields nodes, not indexes.
• for...of list is equivalent to iterating list.values().
• Does not mutate the DOM by itself.
• Related learning: keys(), entries(), forEach(), childNodes.

💡 Best Practices