CSS, HTML und Javascript mit {stil}

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.

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

Attribute sind keine childNodes des Elements, haben kein parent- oder sibling-Element. Attribute werden als Eigenschaften des Elements betrachtet und weniger als Objekt.

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

Eigenschaften vs. Attribute

Ticket erzeugt
<div class="ticket" id="ticketbox" value="full" status="Open Ticket">
 Ticket erzeugt
</div>
[Log] elem.className              ticket 
[Log] elem.getAttribute("class")  ticket 
[Log] elem.status                 undefined 
[Log] elem.getAttribute("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 Standard-Attribut des div-Tags ist. Für Standard-Attribute erzeugt der Browser die entsprechende DOM-Eigenschaft, allerdings nicht, wenn das Attribut kein Standard ist.

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

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