JavaScript Element attributes Property

What You’ll Learn

Element.attributes is a read-only instance property that returns a live NamedNodeMap of all attribute nodes on an element. Learn how to list names and values, how it differs from an Array, and when to use helpers like hasAttributes()—with five examples and try-it labs.

Introduction

HTML attributes like id, class, and contenteditable store extra information on a tag. In JavaScript, each of those becomes an Attr node.

element.attributes gives you a live map of every attribute currently registered on that element—useful for debugging, cloning metadata, or walking all names at once.

const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
console.log(attributes.length);

Understanding the Property

MDN: the Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods, and Attr indexes may differ among browsers.

• Read-only property — you read the map; mutate attributes via DOM APIs.
• NamedNodeMap — key/value style access to Attr nodes.
• Live — updates when attributes are added or removed.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

attributes

Value

A NamedNodeMap object containing the element’s Attr nodes.

📋 MDN Enumeration Example Shape

MDN enumerates attributes on a paragraph with id, class, and contenteditable, then prints each name and value:

<p id="paragraph" class="green" contenteditable>Sample Paragraph</p>

const paragraph = document.getElementById("paragraph");

if (paragraph.hasAttributes()) {
  for (const attr of paragraph.attributes) {
    console.log(`${attr.name} -> ${attr.value}`);
  }
}

Related helpers: getAttribute(), setAttribute(), removeAttribute(), and hasAttribute().

Examples Gallery

Examples follow MDN Element: attributes. Labs use a simple paragraph so you can inspect the live map safely.

const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
console.log(attributes.length);
console.log(attributes.constructor.name);

3
NamedNodeMap

const paragraph = document.getElementById("paragraph");
let output = "";

if (paragraph.hasAttributes()) {
  for (const attr of paragraph.attributes) {
    output += `${attr.name} -> ${attr.value}\n`;
  }
}
console.log(output);

id -> paragraph
class -> green
contenteditable -> 

const el = document.getElementById("paragraph");
const idAttr = el.attributes.getNamedItem("id");
console.log({
  name: idAttr.name,
  value: idAttr.value,
  viaGetAttribute: el.getAttribute("id")
});

{
  "name": "id",
  "value": "paragraph",
  "viaGetAttribute": "paragraph"
}

const el = document.createElement("div");
const map = el.attributes;
console.log(map.length); // 0

el.setAttribute("data-role", "card");
console.log(map.length); // 1
console.log(map.getNamedItem("data-role").value);

0
1
card

console.log({
  supported: "attributes" in Element.prototype,
  type: "NamedNodeMap (not Array)",
  tip: "Use for...of or Array.from(el.attributes)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "type": "NamedNodeMap (not Array)",
  "tip": "Use for...of or Array.from(el.attributes)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Debugging: dump every attribute name and value on a node.
• Cloning or serializing metadata without hard-coding names.
• Teaching DOM: show the difference between attributes and properties.
• Checking whether an element currently has any attributes.
• Building small inspectors or accessibility audit helpers.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• NamedNodeMap is not an Array—no map / forEach.
• Attribute index order can vary between browsers.
• Related: assignedSlot, childElementCount, EventTarget, JavaScript hub.

💡 Best Practices