JavaScript NamedNodeMap length Property

What You’ll Learn

The read-only length property of a NamedNodeMap tells you how many Attr nodes are in the map. Learn the MDN element.attributes example, looping with item(), live updates when attributes change, and how it compares with hasAttributes()—with five examples and try-it labs.

Introduction

Every element’s attributes property is a live NamedNodeMap. Its length is simply the number of attributes on that element—class, id, data-*, and so on each count as one.

MDN’s example uses a <pre> with class, id, and contenteditable, then reads pre.attributes.length to report how many attributes the element has.

Understanding the length Property

A read-only instance property on NamedNodeMap that stores the number of objects in the map.

• Type — a non-negative integer (number).
• Read-only — you cannot assign to map.length.
• Live — changes when attributes are added or removed on the element.
• Common source — element.attributes.length.
• Pair with — map.item(i) for i from 0 to length - 1.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Read length on any NamedNodeMap (usually element.attributes):

namedNodeMap.length

Return value

A number: the count of Attr nodes currently in the map.

Typical pattern (MDN idea)

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

pre.textContent = `The element contains ${attrMap.length} attributes.`;

⚖️ length vs Related Ideas

Examples Gallery

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

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

pre.textContent = `The element contains ${attrMap.length} attributes.`;

The element contains 3 attributes.

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

for (let i = 0; i < map.length; i++) {
  names.push(map.item(i).name);
}

console.log(map.length, names.join(", "));

3 id, class, data-role

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

const before = map.length;
box.setAttribute("title", "Demo box");
const afterAdd = map.length;
box.removeAttribute("class");
const afterRemove = map.length;

console.log(before, afterAdd, afterRemove);

3 4 3

const empty = document.querySelector("#empty");
const withAttrs = document.querySelector("#demo");

console.log(
  empty.attributes.length,
  withAttrs.attributes.length,
);

0 3

const empty = document.querySelector("#empty");
const demo = document.querySelector("#demo");

console.log(
  empty.attributes.length > 0,
  empty.hasAttributes(),
  demo.attributes.length > 0,
  demo.hasAttributes(),
);

false false true true

🚀 Common Use Cases

• Count attributes before looping with item(i).
• Check length > 0 instead of calling hasAttributes().
• Debug how many attrs an element has after DOM changes.
• Validate that removeNamedItem lowered the count by one.
• Teach live collections vs static arrays in the DOM.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Read-only — you cannot set map.length directly.
• Live — the count changes when attributes are added or removed.
• Not the same as array.length on Array.from(map) unless you copy first.
• Related learning: item(), Element.attributes, hasAttributes(), getNamedItem().

💡 Best Practices