JavaScript NamedNodeMap item() Method

What You’ll Learn

The item() method of a NamedNodeMap returns the Attr node at a numeric index. Learn the MDN element.attributes example, how map[i] mirrors item(i), looping with length, and how index lookup differs from getNamedItem()—with five examples and try-it labs.

Introduction

Every element exposes a live attributes collection—a NamedNodeMap. You can look up one attribute by name with getNamedItem("class"), but sometimes you need to walk every attribute in order.

That is what item(index) is for. Pass 0, 1, 2, and so on to get each Attr node. MDN also notes that map[1] (numeric bracket) calls the same logic as map.item(1).

Understanding the item() Method

An instance method on NamedNodeMap that returns the attribute node at a zero-based position.

• index — a number: 0 for the first attribute, 1 for the second, and so on.
• Returns — an Attr node, or null if index ≥ length.
• Bracket alias — map[i] when i is numeric (MDN).
• Common source — element.attributes on any element.
• Pair with — map.length to loop every attribute.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Call the method on a NamedNodeMap (usually from element.attributes):

namedNodeMap.item(index)
namedNodeMap[index]   // numeric index only — same as item(index)

Parameters

• index — non-negative integer position in the map (0-based).

Return value

An Attr at that index, or null when the index is out of range.

Typical pattern (MDN idea)

const pre = document.querySelector("pre");
const attrMap = pre.attributes;

pre.textContent = `The attribute map contains:
0: ${attrMap.item(0).name}
1: ${attrMap[1].name}
2: ${attrMap.item(2).name}`;

⚖️ item() vs Related Ideas

Examples Gallery

Examples follow MDN NamedNodeMap.item. Labs use live element.attributes on real DOM nodes.

const pre = document.querySelector("pre");
const attrMap = pre.attributes;

pre.textContent = `The attribute map contains:
0: ${attrMap.item(0).name}
1: ${attrMap[1].name}
2: ${attrMap.item(2).name}`;

The attribute map contains:
0: class
1: id
2: contenteditable

const box = document.querySelector("#demo");
const map = box.attributes;
const lines = [];

for (let i = 0; i < map.length; i++) {
  const attr = map.item(i);
  lines.push(`${attr.name}=${attr.value}`);
}

console.log(lines.join(", "));

id=demo, class=card, data-role=panel

const el = document.querySelector("#demo");
const map = el.attributes;

const last = map.item(map.length - 1);
const pastEnd = map.item(map.length);

console.log(last?.name, pastEnd === null);

data-role true

const map = document.querySelector("#demo").attributes;

const byIndex = map.item(0);
const byBracketIndex = map[0];
const byName = map["id"];

console.log(
  byIndex === byBracketIndex,
  byName.name,
  byName.value,
);

true id demo

const map = document.querySelector("#demo").attributes;

const byIndex = map.item(0);
const byName = map.getNamedItem("id");

console.log(byIndex.name, byName.name, byIndex === byName);

id id true

🚀 Common Use Cases

• Enumerate every attribute on an element for debugging or logging.
• Build a name/value list from element.attributes.
• Teach how NamedNodeMap mixes index and name access.
• Serialize attributes when you need live Attr nodes (not just strings).
• Interop with legacy DOM code that walks maps by index.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• map[i] with a number calls item(i); string keys use name lookup.
• Index is zero-based; last valid index is length - 1.
• Order of attributes is not guaranteed to match source markup order in all cases.
• Related learning: getNamedItem(), getNamedItemNS(), Element.attributes.

💡 Best Practices