Element: attributes Eigenschaft

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.

Die Element.attributes-Eigenschaft gibt eine live Sammlung aller Attributsknoten zurück, die dem angegebenen Knoten zugeordnet sind. Es handelt sich um ein NamedNodeMap, kein Array, daher hat es keine Array-Methoden, und die Indizes der Attr-Knoten können zwischen Browsern variieren. Konkret gesagt ist attributes ein Schlüssel/Wert-Paar von Strings, das jede Information bezüglich dieses Attributs darstellt.

Wert

Ein NamedNodeMap-Objekt.

Beispiele

Einfache Beispiele

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

Aufzählen der Attribute eines Elements

Sie können die Attribute eines Elements mit for...of durchlaufen. Im folgenden Beispiel werden die Attributknoten für das Element im Dokument mit der ID "paragraph" durchlaufen und jeder Attributwert wird ausgedruckt.

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();" />
      </p>
    </form>
    <pre id="result"></pre>
  </body>
</html>

Spezifikationen

Specification
DOM Standard
# dom-element-attributes

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • NamedNodeMap, die Schnittstelle des zurückgegebenen Objekts
  • Überlegungen zur plattformübergreifenden Kompatibilität: auf quirksmode