DOM

Eine Webseite wird im Browser als Objekt dargestellt. Man nennt es das Document Object Model kurz DOM. Es stellt die Hierachie einer Webseite mit den einzelnen Elementen als DOM-Baum dar. Das Wurzel Element steht ganz oben und der Baum verzweigt sich nach unten.

DOM Baum

Das DOM dient dazu auf die Elemente einer Webseite zuzugreifen und diese zu verändern, hinzuzufügen oder zu löschen.

Knotentypen

Es gibt 8 Knotentype, 4 davon sollte man 4 kennen, um auf die Elemente zugreifen zu können.

Dokumentknoten: Er steht für das gesamte Webseite und bildet die Wurzel des DOM-Baumes. Er wird durch das globale Objekt document präsentiert. Man nennt ihn auch Wurzelknoten
Elementknoten: Die einzelnen HTML-Elemente sind die Elementknoten. h1, div, p
Attributknoten: Attribute in HTML Elementen nennt man Attributknoten. lang, href, src
Textknoten: Der Text innerhalb von Anfangstag und Endtag eines HTML Elements wird Textknoten genannt.

Dokumentknoten

Der Dokumenknoten hat folgende Eigenschaften. Diese Eigenschaften stehen im Browser zur Verfügung. Wenn Javascript in der Node.js Laufzeitumgebung nutzt, gibt es das Objekt nicht, da man normalerweise mit node.js keine Webanwendungen erstellt.

Eigenschaften des documents
document.title	Dokument Titel im title Element
document.lastModified	Das letzte Änderungsdatum
document.URL	URL des Dokuments
document.domain	Domain des Dokuments
document.cookie	Eine Liste aller Cookies
document.forms	Eine Liste aller Formulare
document.images	Eine Liste aller Bilder
document.anchors	alle Anker der Webseite
document.links	Eine Liste aller Links
document.head	das head Element
document.body	das body Element

Elementknoten

Man kann auf einer Webseite Elemente auswählen, um dann Informationen hinzuzufügen oder zu ändern. Dazu gibt es diverse Eigenschaften und Methoden. Die Argumente werden in einfachen oder doppelten Anführungszeichen eingegeben.

Methode		Erklärung	Beispiele
getElementById()	Element	Wählt ein Element anhand der Id	Beispiele
getElementsByClassName()	HTML Collection	Speichert alle Elemente anhand des Klassenamens in einem Array	Beispiel
getElementsByTagName()	HTML Collection	Speichert alle Elemente eines bestimmten HTML-Elements in einem Array.	Beispiele
getElementsByName()	NodeList	Speichert alle Elemente anhand des name-Attributs.	Beispiel
querySelector()	Element	das erste Element eines CSS-Selektors	Beispiele Beispiel
querySelectorAll()	NodeList	alle Elemente eines Css Selektors. sehr gute Methode *****	Beispiele

Wenn es mehrere Elemente sind, die ausgewählt werden können, werden diese in einer NodeList oder einer HTML Collection gespeichert. Beide sind dem Array ähnlich, da sie auch einen Index haben, später mehr dazu. In beiden Fällten wird die Reihenfolge der Elemente durch die Reihenfolge in der HTML Notation bestimmt. Somit hat das erste Element den Index 0. Somit würde im folgenden Beispiel der erste Absatz auf der Seite ausgewählt.

let a = document.getElementsByTagName("p")[0];

Eigenschaften von Elementen

Hat man ein Element ausgewählt, kann man auf seine Eigenschaften zugreifen.

element.id, element.localName, element.innerHTML

siehe

HTMLCollection vs. Array

Die Methode getElementsByClassName gibt keine echte Liste (Array) zurück, sondern eine sogenannte HTMLCollection.

Eine HTMLCollection sieht zwar aus wie ein Array (sie hat Index-Zahlen und eine length), aber sie besitzt die modernen Array-Methoden wie .forEach() oder .findIndex() nicht. Sie ist "nur" eine Live-Ansicht des DOMs.

Die Lösung: In ein echtes Array umwandeln

Du musst die HTMLCollection erst in ein echtes Array "umschaufeln", damit du die bequemen Methoden nutzen kannst. Hier sind die zwei gängigsten Wege:

1. Der moderne Weg (Spread-Operator)

Das ist die kürzeste Schreibweise. Die drei Punkte ... nehmen alle Elemente aus der Collection und legen sie in ein neues Array.

let gruppen = [...document.getElementsByClassName("gruppe")];

2. Der klassische Weg (Array.from)

Das ist sehr gut lesbar und explizit:

let gruppen = Array.from(document.getElementsByClassName("gruppe"));

HTML Collection & Nodelist

Der Unterschied zwischen HTML Collection und NodeList hat einen Grund:

Html Collection
Live vs. Statisch: Eine HTMLCollection (von getElementsByClassName) ist "live". Wenn du per JavaScript ein neues Element mit dieser Klasse hinzufügst, taucht es sofort automatisch in dieser Liste auf. Das macht sie technisch komplexer.
Node List
Statische Momentaufnahme: Eine NodeList (von querySelectorAll) ist meistens eine statische Momentaufnahme. Sie zeigt die Elemente so, wie sie zum Zeitpunkt der Abfrage im DOM waren. Da sie sich nicht ständig selbst aktualisieren muss, konnten die Entwickler ihr leichter nützliche Methoden wie .forEach() spendieren. Selbst die NodeList hat keine Methoden wie .map() oder .filter(). Will man diese nutzen, muss man sie wie oben beschrieben umwandeln.

Kindelemente &Elternelement & Geschwisterelement

Es gibt noch weitere Eigenschaften mit denen man auf Kindknoten und Elternknoten eines Elements zugreifen kann. mehr dazu

Beispiel

Mit Textknoten arbeiten

Hat man ein Element selektiert kann man etwas hinzufügen, verändern oder das Element löschen. Man kann Text oder Attribute hinzufügen oder löschen. Hier einige wichtige Eigenschaften und Methoden.

Elemente verändern
Eigenschaft / Methode	Beschreibung
textContent	Hiermit kann man auf den Textinhalt eines Elements auslesen oder bestimmen. Hiermit ist der reine Text gemeint, nicht die eventuell vorhandenen HTML Auszeichnungen des Textes. Es ist schneller als innerHTML und sollte primär angewendet werden.	Beispiel
innerHTML	Der HTML Inhalt eines Knotens. Text inklusive allen weiteren HTML-Auszeichnungen	Beispiel
innerText	innerText ist eine Eigenschaft von DOM-Elementen, die den sichtbaren Textinhalt eines Knotens und all seiner Nachfahren zurückgibt.	Beispiel
nodeValue	Der Inhalt eines Knotens	Beispiel
createTextNode()	Ein Textknoten wird erstellt	Beispiel
createElement()	Ein HTML Element wird erstellt	Beispiel
createAttribut()	Ein Attributknoten wird erzeugt	Beispiel
setAttribut()	Ein Attributknoten wird hinzugefügt	Beispiel
appendChild()	Ein Kindknoten wird als letztes Kindeelement hinzugefügt	Beispiel
remove()	Die einfachste Methode eine Element zu entfernen. Man braucht lediglich das Element, welches entfernt werden soll . siehe Mediaevent	Beispiel
removeChild()	Ein Kindknoten wird entfernt. Man braucht das Elternelement und das Kindelement	Beispiel

Elemente erstellen und hinzufügen

Element erstellen

Mittels createElement() kann man ein Element erzeugen. Es erwartet als Parameter ein HTML Element als String.

let myDiv = document.createElement("div");

Element hinzufügen

Mit folgenden Methoden kann man ein so erzeugtes Element in der Website irgendwo hinzufügen.

insertBefore()	Das Element wird als vorheriges Geschwisterelement hinzugefügt. Das Elternelement ruft die Methode auf. Der erste Parameter bestimmt das neue Element, der zweite Parameter bestimmt das Geschwisterlement vor dem das neue eingefügt werden soll.	Beispiel
appendChild()	Das Element ist das letzte Kindelement eines Elternelements	Beispiel
replaceChild()	Das Element ersetzt ein bestehendes Kindelement. Die Methode wird auf dem Elternelement aufgerufen und erwartet als erstes Argument den neuen Kindknoten und als zweites Argument den Kindknoten der ersetzt wird.	Beispiel

Dom Traversierung

DOM-Traversierung (von lateinisch transversare – hindurchgehen/überqueren) bezeichnet das "Wandern" durch die Baumstruktur deines HTML-Dokuments.

Stell dir den DOM-Baum wie einen echten Stammbaum vor: Jedes Element hat Eltern, Geschwister und Kinder. Traversierung bedeutet, dass du dich von einem Startpunkt (z. B. dem Slider, den der User gerade bewegt) zu einem Zielpunkt (z. B. der Anzeige) vorarbeitest, indem du diese Beziehungen nutzt.

Beispiel / Beispiel

Die wichtigsten "Wander-Befehle" in JavaScript:

Hier sind die Befehle, die man kennen sollte, um sich im Baum zu bewegen:

DOM Traversierung
Eigenschaft	Richtung	Beschreibung	Beispiel
parentElement	Nach oben	Geht eine Ebene höher zum Eltern-Element.Beispiel: Vom Element zum umgebenden <div>	Beispiel
children	Nach unten	Sucht direkt in der Ebene darunter. Beispiel: Vom Element zu allen Elementen, die darin liegen.	Beispiel
firstElementChild	Nach unten	Sucht direkt in der Ebene darunter. Beispiel: Vom Element zum nächsten Elementen, das darin liegt.	Beispiel
nextElementSibling	Zur Seite	Sucht nach dem nächsten Geschwisterkind auf derselben Ebene.	Beispiel Beispiel
previousElementSibling	Zur Seite	Sucht nach dem nächsten oder vorherigen Geschwisterkind auf derselben Ebene. Beispiel: Vom Element direkt zum nächsten Element davor.	Beispiel
closest()	Der "Sucher" nach oben	Einer der mächtigsten Befehle. Er beginnt beim Element und dann er geht den Baum so lange nach oben, bis er ein Element findet, das auf den CSS-Selector passt. Beispiel: e.target.closest('.slider-group') – findet die Gruppe, egal wie tief das Element darin verschachtelt ist.	Beispiel Beispiel Beispiel

Selektion vs Traversierung:

Stell dir vor, du stehst in einem Haus (dem DOM):

Selektion (getElementById) wäre wie: "Teleportiere mich direkt in Zimmer 402."
Traversierung wäre wie: "Geh aus der Tür, geh den Flur nach links und klopfe an die nächste Tür."

Warum Traversierung oft besser ist als Selektion:

In einem Script nutzt man Traversierung, damit der Code kontextsensitiv wird. Anstatt zu sagen: "Suche das Element mit der ID 'Rot-Anzeige' überall auf der Welt" (Selektion), sagst du: "Suche das Anzeige-Feld, das zu MIR gehört" (Traversierung).

Das macht deinen Code modular. Du kannst die gesamte .slider-group im HTML kopieren und einfügen, und das JavaScript funktioniert sofort für die Kopie mit, ohne dass du eine einzige Zeile Code ändern oder neue IDs vergeben musst.

Das tolle ist, dass man nicht für alles eine ID braucht, wenn man die Struktur des HTMLs clever nutzt.

Javascript Tipps