JavaScript NamedNodeMap getNamedItem() Method

What You’ll Learn

The getNamedItem() method of a NamedNodeMap returns the Attr node for a given attribute name, or null if it is missing. Learn how it works on element.attributes, bracket notation, and how it compares with getAttribute()—with five examples and try-it labs.

Introduction

A NamedNodeMap is a collection of nodes keyed by name. On the web, you most often meet it as element.attributes—a live map of every Attr on an element.

To fetch one attribute node by name, call map.getNamedItem("id"). MDN also notes that map["id"] does the same thing when the key is a string.

Understanding the getNamedItem() Method

An instance method on NamedNodeMap that looks up a node by attribute name.

• Parameter — name: a string with the attribute name.
• Returns — an Attr node, or null if not found.
• Bracket alias — map[name] is equivalent (MDN).
• Common source — element.attributes NamedNodeMap.
• Live map — reflects attribute changes on the element.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

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

namedNodeMap.getNamedItem(name)

// equivalent bracket form (MDN):
namedNodeMap[name]

Parameters

name — a string: the attribute name to look up (for example "id", "class", "data-role").

Return value

An Attr corresponding to name, or null if no match exists.

Typical pattern (MDN idea)

const pre = document.querySelector("pre");
const attrMap = pre.attributes;
const value = attrMap.getNamedItem("test").value;
pre.textContent = `The 'test' attribute contains ${value}.
And 'foo' has ${attrMap["foo"] ? "been" : "not been"} found.`;

⚖️ getNamedItem() vs Related Ideas

Examples Gallery

Examples follow MDN NamedNodeMap.getNamedItem. Labs use element.attributes and real HTML attributes.

const pre = document.querySelector("pre");
const attrMap = pre.attributes;
const value = attrMap.getNamedItem("test").value;
pre.textContent = `The 'test' attribute contains ${value}.
And 'foo' has ${attrMap["foo"] ? "been" : "not been"} found.`;

The 'test' attribute contains test.
And 'foo' has not been found.

const el = document.getElementById("card");
const idAttr = el.attributes.getNamedItem("id");

console.log({
  name: idAttr.name,
  value: idAttr.value,
});

{ "name": "id", "value": "card" }

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

const viaMethod = map.getNamedItem("class");
const viaBracket = map["class"];

console.log(viaMethod === viaBracket); // true

true

const el = document.getElementById("card");
const missing = el.attributes.getNamedItem("data-missing");

console.log(missing); // null

null

const el = document.getElementById("card");
const attr = el.attributes.getNamedItem("data-role");
const str = el.getAttribute("data-role");

console.log(typeof attr);  // "object" (Attr)
console.log(typeof str);   // "string"
console.log(attr.value === str); // true

object
string
true

🚀 Common Use Cases

• Read an Attr node from element.attributes by name.
• Interop with legacy DOM code that walks NamedNodeMap entries.
• Inspect attribute metadata beyond the string value.
• Check presence with truthiness on map[name] (prefer hasAttribute for clarity).
• Teach the difference between NamedNodeMap and Array collections.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• map["name"] is equivalent to map.getNamedItem("name") for string keys.
• NamedNodeMap is not an Array—no map / forEach on the collection itself.
• element.getAttributeNode(name) is another way to get the same Attr.
• Related learning: Element.attributes, getAttribute(), hasAttributes().

💡 Best Practices