Element Nodes – Elementknoten
Elementknoten stellen die gebräuchlichsten Knotentypen im DOM-Baum und sind der programmtechnische Spiegel der HTML-Elemente, also von HTML-Tags und ihren Inhalten.
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").
- getAttribute (attributeName)
getAttributeNode (name)
hasAttribute(name)
attributes - setAttribute (attributeName, attributeValue)
setAttributeNode (newAttribute)
removeAttribute (attributeName)
removeAttributeNode (oldAttribute) - getAttributeNS (namespaceURI, localName)
- setAttributeNS (namespaceURI, qualifiedName, value)
- removeAttributeNS (namespaceURI, localName)
- hasAttributeNS (namespaceURI, localName)
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.
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 (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.
<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.
