Javascript setAttribute – HTML-Attribute erzeugen oder überschreiben

Vom HTML-Attribut zur Eigenschaft

Öffnende HTML-Tags besteht aus einem Namen und Attributen, die wiederum ein Paare aus Namen und Werten sind.

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

const button = document.getElementById ("press");

Wenn der Browser das HTML-Element gelesen und geparst hat, wird es ein 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 oder überschreiben, mit getAttribute auslesen – z.B. elem.getAttribute ("id"), elem.setAttribute ("style"), mit removeAttribute() löschen und mit attributes abfragen, welche Attribute das HTML-Tag hat.

• getAttribute (attributeName)
  getAttributeNode (name)
  hasAttribute(name)
  attributes
• setAttribute (attributeName, attributeValue)
  setAttributeNode (newAttribute)
  removeAttribute (attributeName)
  removeAttributeNode (oldAttribute)

Diese alten Methoden arbeiten sehr nah am HTML. Moderne Methoden wie className für die Manipulation von CSS-Klassen, dataset für data-*-Attribute, ein direktes elem.style oder input.value gehen gezielter vor und hängen nicht vom HTML-Markup ab.

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 – sie haben ihr eigenes API (elem.property):

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

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 mit wörtlichem CSS ist einfacher, weniger fehlerträchtig und kann Breakpoints und supports-Regeln direkt nutzen.

elem.property vs elem.getAttribute()

Die DOM-Eigenschaft 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 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.

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

<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 mit dataset.status behandelt.

Attribute, die kein Standard sind

Für Attribute, die kein Standard sind, gibt auch keine DOM-Eigenschaft. Der zuverlässige Zugriff auf 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.

Für SVG-spezifische Attribute wie x, y und d wird weiterhin setAttribut, getAttribute herangezogen.

circle.setAttribute('cx', 50);
circle.setAttribute('r', 10);
circle.setAttribute('viewBox', '0 0 100 100');

Wo setAttribute, getAttribute heute noch sinnvoll ist: href

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

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

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.

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

<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/

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. Heute unterstützt von allen modernen Browsern.

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