Javascript DOM (Document Object Model)

Javascript DOM Document Object Model – HTML Tags werden Javascript Elemente, HTML Attribute werden Eigenschaften von Elementen.

Das DOM (Document Object Model) beschreibt HTML-, XML- und SVG-Dokumente. Das DOM ist die Schnittstelle für den Zugriff auf Tags, Attribute und Inhalte von HTML-Seiten, XML-Dokumenten und SVG-Grafiken.

Während ECMAScript die Grundlagen von Javascript festlegt, wird das DOM vom W3C definiert und ist der Teil von Javascript, der in der Vergangenheit so viel Ärger bereitet hat, weil jeder Browser eine andere Vorstellung vom Document Object Model hatte.

<table> oder <div class="expert"> sind HTML-Tags in einem HTML-Dokument. HTML-Tags haben Attribute, die ihr Aussehen und Verhalten bestimmen. Mit Javascript haben sie nichts am Hut.

Das DOM verbindet Javascript mit den HTML-Elementen. Jedes HTML-Element hat seine eigene Schnittstelle im Document Object Model, die Eigenschaften (i.d.R. Attribute des HTML-Elements) und Methoden für Javascript definiert.

<input type="search" placeholder="Suche" id="search">

Im DOM spiegelt sich das HTML wieder durch eine Anweisung wie

let searchBox = document.getElementById("search");

Mit searchBox hat Javascript Zugriff auf Eigenschaften, z.B. auf searchBox.value, und kann den Mauszeiger in das Eingabefeld setzen: searchBox.focus().

Eine Baumstruktur setzt alle Elemente eines Dokuments in Beziehung zueinander: Ein Dokument besteht aus Nodes (Knoten) in einer hierarchischen Baumstruktur. Javascript kann sich von einem Element aus durch die Seite hangeln und Elemente, Attribute oder Inhalt einfügen und entfernen.

An der Spitze des DOM-Baums sitzt das document-Objekt, gefolgt vom Root (der Wurzel des DOM-Baums), das bei Webseiten das html-Element der Seite ist. Unterhalb des html-Elements liegen das HEAD- und das BODY-Element.

parentElement, children, nextElementSibling, previousElementSibling

Die Elemente des DOM werden als Nodes – Knoten – bezeichnet. Das html-Element ist das Eltern-Element (parentElement) des head- und des body-Elements. In diesem Beispiel hat head zwei Kinder: titel und meta.

Nicht nur HTML-Elemente bilden Knoten oder DOM-Nodes, sondern HTML-Attribute und Inhalte und selbst Kommentare sind ebenfalls Elemente des DOM.

DOM Tree Nodes, parentNode, childNode, siblings, nextSibling

title und meta sind Nachkommen desselben Eltern-Elements – Siblings im Jargon des DOM. nav ist das Child – ein Kind und direkter Nachkomme von body. body wiederum ist Parent – Elternknoten – des nav-Elements.

Über die Beziehungen wie parentElementchildren, nextElementSibling und previousElementSibling erreicht Javascript jedes Element und kann neue Elemente erzeugen, in den Baum einhängen oder Teile des DOM-Baums löschen.

DOM Traversal – Navigation durch das DOM

Ganz schön viele Zeiger für jedes Element im HTML-Dokument:

DOM Nodes: parentElement, childNode, siblings, nextSibling

Kommentare, Leerzeichen zwischen den HTML-Tags und Zeilenumbrüche erzeugen ebenfalls Knoten, von denen wir lieber gar nichts wissen wollen. Darum wurde die Menge der Zeiger um echte Element-Nodes ergänzt: children, parentElement, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.

Damit reichen schon zwei Zeiger oder Referenzen, um alle Elemente im DOM zu erreichen.

function log (node) {
   console.log (node.nodeName)
}

function domWalker (node, func) {
   func(node);
   node = node.firstElementChild;
   while(node) {
      domWalker (node, func);
      node = node.nextElementSibling;
	}
}
domWalker (document.querySelector("BODY"), log);

// Quelle Douglas Crockford Vortragsnotizen

Viel einfacher als mit komplizierten while-Schleifen durchquert die rekursive Funktion domWalker alle Knoten des DOM. Das zweite Argument ist eine Funktion, die in diesem Beispiel einfach nur den NodeName ausgibt.

Zum Glück müssen wir diese Sippschaft von Vorfahren, Nachkommen und Geschwister nicht verwalten: Die Browser bauen das Dokument als DOM-Baum aus HTML-Elementen, -Attributen und Inhalten auf und halten bei allen Änderungen immer die aktuellen Referenzen bereit.

Grundlage für funktionierende Skripte ist valides HTML.

DOM Elemente

Dieses P-Element hat drei Kinder:

<p>Jedes HTML-Dokument <em>ist ein Knotenbaum</em> aus allen Elementen.</p>
DOM Element Nodes and Text Nodes
Das erste Kind ist der Text-Node "Jedes XML-Dokument ", das zweite Kind ist der Element-Node EM und das dritte Kind ist der Text-Node "aus allen Elementen.". Das EM-Element hat ein Kind: den Text-Node "ist ein Knotenbaum". Text-Nodes haben keine Kinder.

CSS mit Javascript ändern

Die Methoden und Eigenschaften des DOM erzeugen neue Tags, manipulieren die Attribute, hängen Elemente mitsamt allen verschachtelten Elementen an eine andere Stelle des Dokuments und steuern den Fluss der Ereignisse, wenn das Dokument bereits im Fenster des Benutzers geladen ist und ersparen das aufwändige Neuladen des Dokuments.

CSS mit Javascript ändern

Schrift ändern
document.getElementById('change').onclick = function () {
   elem.setAttribute('style','font-family: Georgia,Times, serif');
}

Das Script identifiziert den Button anhand des id-Attributs change und fängt ein onclick-Event auf dem Element ab. Beim Klick auf den Button fügt das Script ein style-Attribut in das Element elem ein.

Element einfügen: insertAdjacentElement

Elemente in das DOM einfügen, ersetzen und entfernen sind tagtägliche Arbeiten für Javascript, gleich ob neue Daten über Ajax eingeschleust wurde oder die Bilder einer Slideshow nachgeladen werden.

Ein Element anklicken

let newfruit = document.createElement("DIV");
newfruit.classList.add("fruit");
document.querySelector(".marker").insertAdjacentElement("afterend", newfruit);

createElement ('DVG') erzeugt einen neuen Elementknoten DIV. newfruit.classList.add("fruit") gibt dem markierten Element die CSS-Klasse fruit.

Das neu erzeugte DIV-Element erscheint allerdings noch nicht im Dokument, sondern schwebt sozusagen frei im Raum. Erst wenn das DIV-Element mit insertAdjacentElement("afterend", newfruit) hinter das markierte Element gehangen wird, erscheint es im Dokument.

insertAdjacentElement hängt ein Element vor (beforebegin) oder hinter (afterend) einem markierten Element ein, oder als erstes (afterbegin) oder letztes Kind (beforeend) eines Teilbaums oder Fragments des DOM.

Neben insertAdjacentElement gibt es weitere Methoden zum Einfügen (z.B. appendChild oder insertBefore ), Ersetzen und Entfernen (replaceChild / remove) von Elementen des DOM-Baums.

Javascript Nodes: Leerraum und Weißraum

Leerraum durch Leerzeichen, Tabulatoren und Zeilenumbrüche erzeugen ebenfalls Knoten im DOM-Baum. Da man sich auf den HTML-Quelltext nicht verlassen darf, müssen die Rückgaben auf den Node Type geprüft werden.

Eine Alternative zu den aufwändigen Abfragen sind Javascript firstElementChild, lastElementChild, nextElementSibling und previousElementSibling. Diese Funktionen sind präziser und liefern nur Element-Nodes (nodeType 1), aber keine Text- und Comment-Nodes.

Javascript DOM Document Object Model Document Object Model html head body title meta nav div form ul section section h1 p Das DOM verbindet Nodes zu einer Baumstruktur Der DOM-Baum parentElement – children parentElement – children previousElementSibling – nextElementSibling siblings firstElementChild lastElementChild p Jedes XML-Element ist ein aus allen Elementen Knotenbaum em FORM <!-- --> Name eingeben und speichern DIV DIV LABEL INPUT LABEL INPUT Name form <!-- --> div div label label input input