JavaScript, das Document Object Model (DOM) kennenlernen!

Wir beschäftigen uns in diesem Beitrag mit dem sogenannten Document Object Model. Dieses Model ist dazu da eine Abstraktion von HTML, XML oder SVG zu schaffen, dieser DOM kann dann mittels JavaScript angesprochen werden. Die Darstellung des DOMs wird als Tree modelliert. So entsteht ein Interface, das mittels JavaScript angesprochen werden kann und es kann im Tree gearbeitet werden.

Über den Dom Tree können die Knoten mittels JavaScript verändert werden. Den Knoten können zum Beispiel auch Event Listener zugeordnet werden. Die erste Spezifizierung wurde formal erstmals 1998 unter dem DOM Level 1 veröffentlicht.

Jeder Knoten entspricht einem Objekt, das Methoden, Attribute und weitere Objekte/Knoten haben kann. So entspricht das ganze Document einem Object. So kommt der Name Document Object Model zustande.

Die aktuellste Version (Living Standard) der DOM Spezifikation kann hier gefunden werden: https://dom.spec.whatwg.org/

Wie ist der DOM aufgebaut?

Der DOM in kann sich wie eine Baum-Struktur vorgestellt werden.

Es gibt Eltern, Kinder und natürlich auch Geschwister. So ist der Main ein Geschwisterteil von Header und Footer und der Body sind die Eltern. Auf diesem Weg lässt sich jedes Element im DOM zu ordnen.

Im unten stehenden Beispiel hat das Meta-Tag zum Beispiel zwei Geschwister. Die zum Beispiel via nextElementSibling oder previousElementSibling angesprochen werden können. Das Elternelement kann mit parentElement angesprochen werden. Des Weiteren gibt es zur Navigation noch die drei Methoden firstElementChild, lastElementChid für das erste und letzte Kind. Zusätzlich gibt es noch das Property children, dieses beinhaltet ein Liste (HTML Collection) wo alle Kind Elemente drinnen sind.

Der DOM besteht nicht nur aus den Knoten (z. B. HTML Tags), sondern auch aus den Attributen wie bei Links zum Beispiel href oder auch den Texten in den einzelnen Knoten.

Wichtig, das Object hat immer nur Eigenschaften und Methoden, also der Knoten, umgangssprachlich spricht man von den Elementen selbst. Das Object enthält also nur Methoden und Eigenschaften, die es als Element auszeichnen.

Im Document Object Model gibt es fünf Bereiche, die hier Primäre wichtig sind:

• Ändern von Objekten
• Hinzufügen von Objekten
• Entfernen von Objekten
• Lesen von Objekten
• Erstellen von Objekten

Diese fünf Bereiche sind essenziell um in JavaScript mit dem DOM arbeiten zu können.

DOM mittels JavaScript modifizieren!

Im Nachfolgenden besprechen wir wie du Elemente selektieren kannst um diese dann auszulesen, zu entfernen, an diesen Stellen neue einzufügen oder ganz neue Nodes (Knoten) zu erstellen.

Selektieren von Elementen im Document Object Model

Im ersten Abschnitt wollen wir uns nun damit beschäftigen, wie Elemente selektiert werden können. Die Methoden um Elemente zu Selektieren können nicht nur auf das document angewendet werden sondern auf jedes belibige HTML Element.

Selektieren anhand der ID eines Elementes

Die Methode getElementByID("deineID") kann verwendet werden, um ein einzelnes Element / Knoten zurückzuerhalten. Falls keine passende ID auf der Seite zu finden ist, wird null zurückgegeben.

let deinElement = document.getElementById('deineID') 

Selektieren von Elementen anhand von Klassen

Die Methode getElementsByClassName("classe1 classe2") kann verwendet werden, um alle Elemente als Liste (HTML Collection) zu erhalten. Hier können im Vergleich zu getElementByID mehrere Klassen mittels Lehrstelle getrennt angegeben werden, die Angabe von nur einer Klasse ist auch möglich.

Da dieses kein normaler Array ist, sondern eine HTML Collection kann zum Beispiel noch die Methode namedItem('name') verwendet werden, um ein Element zu erhalten, das diesen Namen hat als name oder id Attribute.

let listeVonElementen = document.getElementsByClassName('classe1 classe2') 

listeVonElementen.namedItem('name')

Selektieren von Elementen anhand des Name-Attributes

Die Methode getElementsByName('derName') kann verwendet werden, um anhand des Name-Attributes Elemente zu selektieren. Diese Methode ist grade bei Formular-Feldern interessant. Da dort gehäuft das name Attribute verwendet wird. Auch hier wird eine HTML Collection zurückgegeben.

let listeVonElementen = document.getElementsByName('derName')

Selektieren von Elementen anhand ihres Tags

Manchmal ist es nützlich alle Links, alle Formulare oder ähnliches direkt selektieren zu können. Die Methode um dieses zu tun heißt getElementsByTagName('dasTag'), dieses gibt ebenfalls eine HTML Collection zurück.

let listeVonLinks = document.getElementsByTagName('a')

Selektieren von Elementen mittels CSS Selektoren

Elemente selektieren auf Crack, das geht mit dem QuerySelector. Der riesige Vorteil hier können einfach CSS Selektoren geschrieben werden und man erhält sein Element oder die Elemente, je nachdem was gewünscht ist.

Um damit zu arbeiten gibt es zwei Methoden querySelector('#test .selector') und querySelectorAll('#test .selector'). Der Unterschied ist, die eine gibt ein einzelnes Element zurück und die andere eine NodeListe.

Falls mehrere Elemente vorhanden sind, wird bei der Methode für nur ein Element, immer das erste zurückgegeben. Da danach der Suchlauf abgebrochen wird.

let singleElement = document.querySelector('#test .selector')

let liste Elemente = document.querySelectorAll('#test .selector')

Lesen von Inhalten im Document Object Model

Um Inhalte zu lesen, gibt es verschieden Eigenschaften und Methoden, je nachdem welche Inhalte benötigt werden.

let element = document.getElementById('test') 

if(element){ // Abfrage um null Werte auszuschließen, diese würde zu Fehlern führen.

    console.log(element.innerText); // Rückgabe String mit dem Text des Elementes

}

Neben den gängigen wie innerText oder innerHTML gibt es noch weitere. Die am häufigsten benötigt werden, sind noch einmal in der unten stehenden Tabelle zu finden.

Alle Attribute in der nachfolgenden Tabelle können so auch neue Werte zugewiesen bekommen.

Entfernen von Elementen im Document Object Model

Um Element aus dem DOM zu entfernen, gibt es eine simple Methode .remove() diese kann auf jegliches Element angewendet werden und anschließend verschwindet das Element aus dem DOM.

let element = document.getElementById('test') 

if(element){ // Abfrage um null Werte auszuschließen, diese würde zu Fehlern führen.

    console.log(element.remove()); // Entfernt das Element

}

Alternativ dazu kann theoretisch auch mit Eigenschaften wie innerHTML oder outerHTML Elemente aus dem DOM entfernt werden, wenn zum Beispiel nur ein String ohne Inhalt zugewiesen wird. Dieses ist allerdings nicht zu empfehlen, da durch so eine Zuweisung von einem String ohne Inhalt bei größeren Anwendungen leicht die Übersicht verloren gehen kann. Durch die Aussage remove ist direkt jedem klar was dort gemacht wird, es wird etwas entfernt.

Erstellen von neuen Knoten/Elementen

Neue Elemente können mittels createElement erstellt werden, diese Methode existiert nur bei dem Object document. Zu beachten ist, das es noch weitere Möglichkeiten gibt Strings direkt zu einem DOM hinzuzufügen, allerdings werden diese dann Intern geparst und nicht Stück für Stück aufgebaut. Die Variante mittels createElement ist deutlich sauberer und sollte, wenn möglich verwendet werden.

let neuesElement = document.createElement('span');
let neuerText = document.createTextNode('Willkommen bei HelloCoding.de');

neuesElement.appendChild(neuerText) // Text wird als Kind vom Element angelegt. 

document.body.appendChild(neuesElement) // Element wird als Kind zum Body hinzugefügt.

Wichtig ist hier das über document.createElement() erstellte Element muss zum DOM erst an der richtigen Stelle hinzugefügt werden, ansonsten existiert es nur in der Variable. Übrigens, falls du es zum DOM hinzufügst, kannst du es über die angelegte Variable auch im Nachhinein noch einmal ändern. Im Folgenden eine andere Methode wie Elemente zum DOM hinzugefügt werden können, diese finde ich persönlich äußerst charmant.

Hinzufügen von Konten/Elementen zum DOM

Im vorangegangen Abschnitt haben wir bereits ein Element zum DOM hinzugefügt. Eine Variante, die dort sehr schön zu verwenden ist, heißt zielElement.insertAdjacentElement(position, element), als ersten Parameter wird eine Position angegeben und als zweites das Element, was eingefügt werden soll. Das zielElement ist ein Element, was vorher selektiert worden ist, diese gibt die Position vor.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  bar
  <!-- beforeend -->
</div>
<!-- afterend -->

Unser Element aus dem vorherigen Beispiel wird nun zum Beispiel am Anfang des Bodys folgendermaßen hinzugefügt.

document.body.insertAdjacentElement('beforeend',neuesElement);

Alternative zu insertAdjacentElement kann auch insertAdjacentHTML verwendet werden der Unterschied gegenüber dem ersten ist das ein String übergeben werden kann und dann als HTML Element geparst wird.

Zusammenfassung

Der DOM ist ein wichtiges Modell, um von z.B. HTML Tags in JavaScript eine entsprechende Abstraktion als Objekte zu haben. So kann in JavaScript auf XML, HTML und SVG zugegriffen werden. Dieses ist eine wichtige Grundlage, die man verstanden haben sollte, bevor man sich an komplexere Themen heranwagt. Persönlich bin ich ein Verfechter davon, Elemente mittels der entsprechenden Methode anzulegen, zu löschen oder zu erstellen und möglichst nie mittels String Methoden/Attributen zu verändern.