Javascript getAttribute, setAttribute, removeAttribute

Javascript Element Attributes

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Element Nodes – Elementknoten

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

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

<button id="press" title="Press Button" class="buttons">Klick mich!</button>
let button = document.getElementById ("press");

Wenn der Browser das HTML-Element gelesen und geparst hat, wird es ein Objekt des Document Object Modell. 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 der ID zurück
elem.className
Setzt den Wert des class-Attributs oder gibt den Wert zurück
elem.accessKey
Setzt oder liest den accesskey
elem.dir
Setzt das dir-Attribut eines Elements oder gibt den Wert von dir zurück
elem.lang
Setzt den Wert des lang-Attributs
elem.style
Setzt das style-Attribut eines Elements oder gibt den Wert von style 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.

Es kann durchaus sinnvoll sein, anstelle vieler style-Attribute ein Stylesheet im head-Element der Seite zu erzeugen und dynamisch mit CSS-Regeln zu füllen. Die Arbeit wörtlichem CSS ist einfacher und weniger fehlerträchtig und kann Breakpoints und supports-Regeln direkt nutzen.

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 . getAttribute nicht mehr denselben Wert.

Eingabe ändern
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.

Etwas Plus für getAttribute

Im Großen und Ganzen scheint getAttribute der Direkt-Eigenschaft elem.property hinterherzuhinken.

elem.href gibt nicht "/" zurück wie zu erwarten wäre. Das a-Element hat eine Schnittstelle HTMLHyperlinkElementUtils mit kleinen Hilfseigenschaften, z.B. protocol und hash, die Informationen zum Link bereithalten.

Eine dieser Eigenschaften ist href, das allerdings die vollständige URL zurückgibt und nicht die relative URL im Attribut.

Wenn der wörtliche String innerhalb von href gemeint ist, muss elem.getAttribute("href") eingesetzt werden.

Ein a-Tag mit href="/": Test
<a href="/" id="ahref">Test</a>
…
<script>
const 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.

toggleAttribute

Wenn Attribute nur zwei Werte annehmen können – Boolean Attribute – hat Javascript toggleAttribute im Angebot, das ein Boolean-Attribut wie hidden entfernt, wenn es gesetzt ist oder hinzufügt, wenn es nicht gesetzt ist. Unterstützt von allen modernen Browsern (nein, natürlich nicht von IE11).

document.querySelector("h2").toggleAttribute ("hidden");

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.