Was ist das DOM? Knoten, Attribute und wie du es änderst

Dieser Artikel kann noch aktualisiert werden.

Wenn du Fragen oder Anmerkungen hast, hinterlass gern einen Kommentar.

Document

Der Document-Knoten ist der Ausgangspunkt: Von ihm aus erreichst du sämtliche Elemente des DOM. Er steht zugleich für das Objekt Document, das verschiedene Methoden für den Zugriff auf die Elemente bereitstellt. (z. B. document.querySelector('div.exemple');)

Element

Die HTML-Elemente beschreiben die Struktur einer HTML-Seite. Um in den DOM-Baum einzusteigen, suchst du über Document zuerst nach Elementen. Hast du das gewünschte Element gefunden, kommst du von dort an seine Text- und Attributknoten.

Attribut

Die öffnenden Tags von HTML-Elementen können Attribute enthalten (zum Beispiel id, class …), und diese liegen im DOM-Baum als Attributknoten vor. Attributknoten sind keine Kinder des Elements, das sie trägt. Sie gehören zu diesem Element und können selbst keine Kinder haben. Sobald du ein Element in der Hand hast, stehen dir eigene JavaScript-Methoden und -Eigenschaften zur Verfügung, um seine Attribute zu lesen oder zu ändern.

Text

Wie beim Attributknoten erreichst du einen Textknoten über einen Elementknoten, und wie der Attributknoten kann auch ein Textknoten keine Kinder haben.

Auf Elemente zugreifen

---

Um ein Element zu ändern, musst du zuerst an es herankommen. Dafür gibt es zahlreiche Methoden, mit denen du durch das DOM navigierst und es veränderst.

Ein Element auswählen

• getElementById(): Greift über das Attribut ID auf ein Element zu.
• querySelector(): Gibt ein Element anhand eines CSS-Selektors zurück.

Mehrere Elemente auswählen

Diese Methoden liefern die Elemente als Liste zurück.

• getElementsByClassName(): Gibt mehrere Elemente anhand einer Klasse zurück.
• getElementsByTagName(): Gibt mehrere Elemente anhand eines HTML-Tags zurück (z. B. <div>).
• querySelectorAll(): Gibt mehrere Elemente anhand eines CSS-Selektors zurück.

Von einem Knoten zum nächsten

• parentNode: Gibt das Elternelement des aktuellen Elements zurück.
• childNodes: Gibt eine Liste der Kinder des aktuellen Elements zurück.
• previousSibling: Gibt das vorherige Geschwisterelement des aktuellen Elements zurück.
• nextSibling: Gibt das nächste Geschwisterelement des aktuellen Elements zurück.
• firstChild: Gibt das erste Kindelement des aktuellen Elements zurück.
• lastChild: Gibt das letzte Kindelement des aktuellen Elements zurück.

Attribute bearbeiten

---

Sobald du auf dein Element zugreifst, kommst du auch an seine Attribute und deren Werte. Mehrere Methoden helfen dir dabei, sie zu bearbeiten.

id

• id: Liest oder setzt die id des Elements.

Klasse

• className: Liest oder setzt die Klasse des Elements.
• classList: Gibt eine Liste mit den Klassen des Elements zurück.
• add: Fügt der Liste eine Klasse hinzu.
• remove: Entfernt eine Klasse aus der Liste.
• toggle: Fügt eine Klasse hinzu oder entfernt sie (schaltet um: hinzufügen, wenn sie fehlt, entfernen, wenn sie da ist).
• contains: Gibt true zurück, wenn eine Klasse in der Liste steht.

Attribute allgemein

• hasAttribute(): Gibt true zurück, wenn das aktuelle Element ein bestimmtes Attribut besitzt.
• getAttribute(): Gibt den Wert des angegebenen Attributs zurück.
• setAttribute(): Fügt dem Element ein Attribut hinzu, mit dem Wert als zweitem Argument.
• removeAttribute(): Entfernt ein Attribut aus dem Element.

Auf Werte zugreifen

• nodeValue: Gibt den Inhalt eines Knotens zurück, bei einem Absatz seinen Text, bei einem Attribut dessen Wert.
• innerText: Liest den Text ohne das Markup.
• innerHTML: Liest den Text samt dem Markup des Knotens.
• textContent: Liest den Text wie innerText, dazu aber auch <script> und <style>, anders als innerText.

Elemente in drei Schritten hinzufügen

---

Zum Wichtigsten an der Arbeit mit dem DOM gehört, neue Elemente anlegen zu können. Ein vollständiges Element entsteht in drei Schritten:

1. createElement(): Du legst zuerst mit der Methode createElement() einen neuen Elementknoten an. Dieser Knoten landet in einer Variablen.
   javascriptKopieren

   var element= document.createElement("p");

2. createTextNode(): createTextNode() erzeugt einen neuen Textknoten. Auch er wird in einer Variablen abgelegt und lässt sich mit der Methode appendChild() an den Elementknoten hängen.
   javascriptKopieren

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild(): Jetzt, wo dein Element steht, mit oder ohne Inhalt in einem Textknoten, hängst du es mit dieser Methode in den DOM-Baum.
   javascriptKopieren

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

Die Methode write

Vielleicht hast du von der Methode document.write gehört, mit der sich Markup und Text in ein Dokument schreiben lassen. Sie bringt allerdings reichlich Nachteile und Probleme mit sich, denn sie funktioniert nur, solange die Seite erstmalig geladen wird, danach richtet sie verschiedenen Schaden an.

• Die ganze Seite überschreiben
• Den Inhalt nicht an die Seite anhängen
• Eine neue Seite erzeugen

Ein Element in drei Schritten entfernen

---

Wie beim Hinzufügen kommt es vor, dass du ein Element aus dem DOM entfernen musst.

1. Dafür legst du das Element, das du löschen willst, zuerst in einer Variablen ab.
   javascriptKopieren

   var removeElement= document.getElementById('monId');

2. Über diese Variable greifst du dann mit parentNode auf das Elternelement zu.
   javascriptKopieren

   var parentElement = removeElement.parentNode;

3. Mit dieser zweiten Variablen löschst du anschließend das Element, das du im ersten Schritt abgelegt hast.
   javascriptKopieren

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);