W3cubDocs

/Web APIs

Element: attributes property

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 the Attr nodes' indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute.

Value

A NamedNodeMap object.

Examples

Basic examples

js

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

Enumerating elements attributes

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

html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Attributes example</title>
    <script>
    function listAttributes() {
       const paragraph = document.getElementById("paragraph");
       const result = document.getElementById("result");

       // 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";
       }
    }
    </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input type="button" value="Show first attribute name and value"
          onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
attributes 1 12 1 5.5 8 1 4.4 18 4 10.1 1 1.0

See also

  • NamedNodeMap, the interface of the returned object
  • Cross-browser compatibility considerations: on quirksmode

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes