JavaScript/DOM/Element/attributes

Die Eigenschaft Element.attributes speichert die verfügbaren Attribute eines Elements.

Syntax

var attr = element.attributes;

• attr: Live Collection aller Attribute. Sie wird verschiedentlich als Array bezeichnet, es handelt aber um eine NamedNodeMap.

DOM - Attribute finden ansehen …

    document.body.addEventListener('click', function (event) {
      const clickedElement = event.target;
      const outputPre = document.querySelector('#output pre');
      let attributesInfo = '';

      if (clickedElement.attributes.length > 0) {
        attributesInfo = `Attribute von <${clickedElement.tagName.toLowerCase()}>:\n`;
        for (let attr of clickedElement.attributes) {
          attributesInfo += ` - ${attr.name}: "${attr.value}"\n`;
        }
      } else {
        attributesInfo = `Keine Attribute für <${clickedElement.tagName.toLowerCase()}> gefunden.`;
      }

      outputPre.textContent = attributesInfo;

      event.stopPropagation();
    });

Die Webseite besteht aus mehreren Elementen, die zum Teil Attribute besitzen.

Im Script-Bereich lauscht ein EventListener auf einen Klick. Dann wird mit Event.target das geklickte Element ermittelt. In einer Bedingung wird mit (clickedElement.attributes.length > 0) überprüft, ob die attributes-NamedNodeMap Attribute enthält.

Ist das der Fall, wird mit clickedElement.tagName der Elementname ermittelt und der Variablen attributesInfo zugeweisen.

In einer For...of-Schleife wird für jedes Attribut name und value ermittelt und in einem template-literal attributeInfo hinzuzugefügt.

Anschließend wird die Info im pre-Element ausgegeben.

---

Über die attributes-NamedNodeMap können Sie auch auf Attribute zugreifen. So liefert beispielsweise document.getElementsByTagName('body')[0].attributes[0].nodeValue den Wert beispiel, da attributes[0] eines der beiden Attribute bezeichnet, und nodeValue den zugehörigen Wert speichert.

Beachten Sie: Die Reihenfolge, in der die Attribute in der attributes-NamedNodeMap gespeichert sind, ist nicht definiert. Sie können sich nicht darauf verlassen, dass attributes[0] tatsächlich das erste, im HTML-Code notierte, Attribut ist. Diese Notation ist nur dazu gedacht, einfache Zählschleifen zu erlauben.

Da es sich bei attributes nicht um ein Array, sondern um eine NamedNodeMap handelt, ist der Zugriff über einen numerischen Index als Option für leichtere Aufzählung vorgesehen. Der Normalfall ist der Zugriff über den Attributnamen.

Beachten Sie: Der Zugriff auf Attribute mittels der attributes-Eigenschaft wird bspw. von quirksmode.org als "bloody mess" bezeichnet. Die attributes-NamedNodeMap sollte möglichst nicht genutzt werden, weil es viele Browser-Inkompatibilitäten gibt. Verwenden Sie die Attribut-Methoden des Elements.

Siehe auch

• JavaScript/DOM/Element/getAttributeNames

• 

  Was ist das DOM?
  • Baumstruktur
  • Elementknoten ansprechen
  • Textknoten ansprechen