Javascript getAttribute, setAttribute, removeAttribute

Element style, class und andere Attribute von Elementen lesen, schreiben, entfernen

setAttribute, getAttribute und removeAttribute erzeugen, lesen und ändern HTML-Attribute wie id, type, title und src. Attribute sehen aus wie Eigenschaften, sind deckungsgleich zu Eigenschaften, aber es gibt zarte feine Unterschiede.

Elementknoten stellen die gebräuchlichsten Knotentypen im DOM-Baum und sind der programmtechnische Spiegel der HTML-Tags.

Ein HTML-Tag besteht aus einem Namen und Attributen, die wiederum ein Paar aus Namen und Wert gebildet sind.

<button id="press" title="Press Button" class="buttons">Klick mich!</button>

Wenn der Browser das HTML-Element gelesen und geparst hat, wird es Objekt des DOM. Objekte haben Eigenschaften. Grob gesagt: Was in HTML ein Attribut ist, ist in Javascript eine Eigenschaft / Property eines Objekts im DOM.

Javascript kann die Attribute eines Elements mit setAttribute setzen und mit getAttribute auslesen – z.B. elem.getAttribute ("id"), elem.setAttribute ("class").

DOM-Eigenschaften (Properties)

Es gibt viele Attribute für HTML-Tags. Der Browser erzeugt DOM-Objekte aus HTML-Tags, erkennt die Standard-Attribute und erzeugt DOM-Eigenschaften (Properties) aus den Attributen. Standard-Attribute sind z.B. id, title, class, id und src. Diese Funktionen erreichen die HTML-Standard-Attribute eines Elements direkt:

elem.id
Setzt das id-Attribut oder gibt den Wert des id-Attriubts zurück
elem.className
Setzt den Wert des class-Attributs oder gibt den Wert zurück
elem.accessKey
Setzt oder liest das accesskey-Attribut
elem.dir
Setzt das dir-Attribut eines Elements oder gibt den Wert des dir-Attributs zurück
elem.lang
Setzt den Wert des lang-Attributs
elem.style
Setzt das style-Attribut eines Elements oder gibt den Wert des Attributs zurück
elem.tabIndex
Setzt oder ändert den Wert des tabindex-Attributs eines Elements
elem.title
Setzt den Wert des title-Attributs eines Elements oder gibt ihn zurück
mehr …
lange lange Liste von HTML-Attributen

elem.style bzw. elem.style.value waren lange Zeit der goldene Weg, um CSS mit Javascript zu manipulieren. Mit der breiten Unterstützung für classList ist es effizienter, nicht den inline-Stil zu ändern, sondern CSS-Klassen hinzuzufügen, zu entfernen oder zu toggeln.

elem.property vs elem.getAttribute()

Die DOM-Eigenschaft (dot-Notation) und die Sichtweise von attribute() sind fast immer – aber eben nicht immer – 1:1 synchron.

Trotz der scheinbar so starken Parallele zwischen HTML-Attributen und Eigenschaften des Objekts (getAttribut) gibt es gravierende Unterschiede. getAttribute liest den Wert eines HTML-Attributs. Wird der Wert durch eine Benutzereingabe geändert, haben elem . property und elem . getAttribut nicht mehr denselben Wert.

elem.value
getAttribute ("value")

Für Standard-Attribute erzeugt der Browser die entsprechende DOM-Eigenschaft, allerdings nicht, wenn das Attribut kein Standard ist.

Ticket erzeugt
<div class="ticket" id="ticketbox" value="full" data-status="Open Ticket">
 Ticket erzeugt
</div>
[Log] elem.className                   ticket 
[Log] elem.getAttribute("class")       ticket 
[Log] elem.dataStatus                  undefined 
[Log] elem.getAttribute("data-status") Open Ticket
[Log] elem.value                       undefined 
[Log] elem.getAttribute("value")       full 

id ist ein Standard-Attribut für alle HTML-Tags, value, type und src sind nur in bestimmten HTML-Tags ein Standard-Attribut. elem.value würde bei einem div-Tag undefined zurückgeben, weil value kein Attribut des div-Tags ist.

data-status ist ein data-Attribut, das sich speziell an Javascript richtet: Javascript data-attribute. Data-Attribute werden mit setAttribute bzw. getAttribute oder (ab IE11) mit dataset.status behandelt.

Ein a-Tag mit href="/": Test
<a href="/" id="ahref">Test</a>
…
<script>
var a = document.getElementById("ahref");
console.log ("a.getAttribute('href')" + a.getAttribute('href'));
console.log ("a.href " + a.href);
</script>

a.getAttribute gibt den wörtlichen Inhalt des href-Attributs zurück, a.href hingegen die volle URL hinter "/".

[Log] a.getAttribute('href') /
[Log] a.href                 https://www.mediaevent.de/

Für die meisten Aufgaben verlassen wir uns am besten auf die DOM-Eigenschaften. Der Zugriff auf die Attribute ist nur erforderlich,

  • bei Attributen, die kein Standard sind (wenn der Name des Attributs allerding mit data- beginnt, erfolgt der Zugriff über dataset).
  • wenn tatsächlich das »Original« des Attributs aus dem HTML-Tag gefragt ist. So liefert die href-Eigenschaft immer die volle URL, auch wenn im Markup nur /javascript/get-attribute.html steht.

DOM-Attribute

Für Attribute, die kein Standard sind, gibt auch keine DOM-Eigenschaft. Der zuverlässige Zugriff aus diese Attribute erfolgt über

elem.hasAttribute(name)
– prüft, ob das Attribut existiert
elem.getAttribute(name)
– gibt den Wert des Attributs zurück
elem.setAttribute(name, value)
– setzt den Wert des Attributs
elem.removeAttribute(name)
– entfernt das Attribut

Darüber hinaus liest elem.attributes() alle Attribute eines Elements in eine NamedNodeList – das ist eine Sammlung von Objekten mit Namen und Eigenschaften.

getAttributesetAttribute removeAttribute