Element: attributes property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

TheElement.attributes property returns a live collectionof all attribute nodes registered to the specified node. It is aNamedNodeMap, not anArray, so it has noArraymethods and theAttr nodes' indexes may differ among browsers. To be morespecific,attributes is a key/value pair of strings that represents anyinformation regarding that attribute.

Value

ANamedNodeMap object.

Examples

Basic examples

// Get the first <p> element in the documentconst paragraph = document.querySelector("p");const attributes = paragraph.attributes;

Enumerating elements attributes

You can enumerate through an element's attributes usingfor...of.The following example runs through the attribute nodes for the element in the documentwith id "paragraph", and prints each attribute's value.

html

<p contenteditable>Sample Paragraph</p><input type="button" value="Show paragraph attribute name and value" /><pre></pre>

css

.green {  color: green;}

const paragraph = document.getElementById("paragraph");const result = document.getElementById("result");const btn = document.querySelector("input[type='button']");btn.addEventListener("click", () => {  // First, let's verify that the paragraph has some attributes  if (paragraph.hasAttributes()) {    let output = "Attributes of first paragraph:\n";    for (const attr of paragraph.attributes) {      output += `${attr.name} -> ${attr.value}\n`;    }    result.textContent = output;  } else {    result.textContent = "No attributes to show";  }});