JavaScript Element attributes Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ATTRIBUTES

Definition

Element.attributes returns a live NamedNodeMap of all Attr nodes on the element (MDN). Each entry has a name and a value. It is not an Array.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.attributes. Start with this line.

JavaScript
el.attributes
CallWhat it does
el.attributesPrimary signature.

Built into the browser. Read or assign el.attributes — no import required.

Library declarations
JavaScript
el.attributes

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Live NamedNodeMap

JavaScript Examples

Example 1 — Enumerate with for...of (MDN)

Print every attribute name and value on a paragraph.

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

if (paragraph.hasAttributes()) {
  for (const attr of paragraph.attributes) {
    console.log(`${attr.name} -> ${attr.value}`);
  }
}
// id -> paragraph
// class -> green
// contenteditable ->
Try It Yourself

How It Works

  1. Find the element. getElementById returns the paragraph.
  2. Guard with hasAttributes. Skip the loop if there is nothing to show (MDN).
  3. Iterate the map. for...of yields each Attr node.
  4. Read name and value. Boolean attributes like contenteditable often have an empty value.

Example 2 — Look Up One Attr by Name

Use getNamedItem when you need the Attr node, not just the string.

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

console.log(idAttr.name);                 // "id"
console.log(idAttr.value);                // "paragraph"
console.log(el.getAttribute("id"));       // "paragraph" (simpler for values)
Try It Yourself

How It Works

  1. Ask the map by name. getNamedItem("id") returns an Attr or null.
  2. Read node fields. name and value come from that Attr.
  3. Prefer getAttribute for values. It returns the string directly and is easier to read.
  4. Missing name. getNamedItem returns null — check before using .value.

Example 3 — The Map Is Live

Adding an attribute updates attributes.length automatically.

JavaScript
const el = document.createElement("div");
const map = el.attributes;

console.log(map.length); // 0
el.setAttribute("data-id", "42");
console.log(map.length); // 1
console.log(map.getNamedItem("data-id").value); // "42"
Try It Yourself

How It Works

  1. Capture the map once. const map = el.attributes keeps the same live object.
  2. Start empty. A new <div> has length 0.
  3. Set an attribute. setAttribute adds an Attr; length becomes 1.
  4. No re-query needed. The same map reference already shows the new node.
Compatibility

Browser Support

Element.attributes is Baseline Widely available (MDN: across browsers since July 2015).

✓ Baseline · Widely available

Element.attributes

Supported in all modern browsers and long-standing engines. Safe to use in everyday DOM code.

99% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.attributes Excellent

Bottom line: Universally available. Remember it is a live NamedNodeMap, not an Array, and do not rely on attribute index order.

Frequently Asked Questions

It returns a live NamedNodeMap of all Attr nodes registered on the element. Each entry has a name and a value.
No. MDN marks Element.attributes as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It is a NamedNodeMap, not an Array. It has no Array methods like map or forEach. Use for...of, or Array.from(el.attributes) when you need array helpers.
Yes. If you add or remove attributes on the element, the NamedNodeMap updates automatically.
Use el.getAttribute("name"), or el.attributes.getNamedItem("name") for the Attr node. For a single value, getAttribute is usually clearer.
Use attributes to list or inspect every Attr node. Use getAttribute / setAttribute / hasAttribute when you care about one named attribute.

Next: childElementCount

Learn the childElementCount property — how many element children a node has.

childElementCount tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

18 people found this page helpful

JavaScript Element assignedSlot Property JavaScript Element childElementCount Property