Was Ist DOM?

Der Dokumentenbaum

Der DOM (Document Object Model) Dokumentenbaum ist eine Art Baumstruktur, die verwendet wird, um HTML und XML-Dokumente darzustellen. Er ist die Grundlage für die moderne Webentwicklung und bildet die Basis für alle Stil- und Skriptsprachen wie JavaScript und CSS.

Auf grundlegender Ebene ist es wichtig zu verstehen, dass der DOM-Dokumentenbaum eine Hierarchie von Elementen und Knoten enthält: Jedes Element oder jeder Knoten enthält einzelne Datenstücke, ob es sich nun um Text, Bilder, Links usw. handelt, die alle mit Code manipuliert werden können. Jedes Stück Code, das in einer modernen Webumgebung geschrieben wird, interagiert mit Elementen im DOM-Dokumentenbaum; daher ist das Erlernen der Grundlagen dieser Struktur unerlässlich für jeden angehenden Webentwickler.

Elementknoten

Elementknoten sind die einzelnen Elemente innerhalb des DOM-Dokumentbaums. Diese sind in einer hierarchischen Struktur organisiert, wobei verschiedene Knoten verschiedene Datentypen repräsentieren. Die häufigsten Arten von Elementknoten sind HTML-Tags, wie div oder p, die separate Abschnitte oder Codeblöcke auf einer Webseite darstellen.

Elementknoten können auch zusätzliche Attribute wie ID und Klasse enthalten, die es Entwicklern ermöglichen, gezielt auf bestimmte Inhalte in ihrem Code zuzugreifen. Knotenattribute können auch verwendet werden, um Elementen zusätzlichen Kontext zu verleihen, was Entwicklern hilft zu verstehen, wie sie durch Code gestaltet und manipuliert werden.

Letztendlich basiert alle Webentwicklung darauf, diese Elementknoten zu manipulieren; daher ist es wichtig für Anfänger, die Grundlagen dieser Knoten zu verstehen, um komplexere Websites und Anwendungen gestalten zu können.

Attributknoten

Attributknoten sind Knoten innerhalb des DOM, die spezifische Informationen über ein Element enthalten. Jeder Attributknoten enthält ein Schlüssel-Wert-Paar, wobei der Schlüssel der Name des Attributs und der Wert die zugehörigen Daten sind. Beispiele für diese Schlüssel-Wert-Paare sind die ID eines Elementknotens (Schlüssel=id, Wert=die spezifische ID des Elements) oder ein Klassenname (Schlüssel=class, Wert=der Name einer Klasse). Diese Attribute bieten zusätzlichen Kontext für Entwickler, um Elemente auf Webseiten zu identifizieren und mit Code zu manipulieren. Das Verständnis der Nutzung dieser Attribute ist wesentlich für die Erstellung komplexer Webseiten und Anwendungen.

Textknoten

Textknoten sind die Blattknoten des DOM, was bedeutet, dass sie allen Textinhalt innerhalb eines Elements enthalten. Dies umfasst sowohl reinen Text als auch HTML-Tags, wie Absatz-Tags oder Überschrift-Tags. Textknoten können auch verwendet werden, um zusätzlichen Kontext und Struktur zu einer Webseite hinzuzufügen, wie das Hinzufügen von Titeln und Überschriften, da sie den Text enthalten, der auf dem Bildschirm erscheinen wird.

Außerdem müssen beim Manipulieren von Elementen über JavaScript-Code die Elemente durch das Durchlaufen der Kindknoten des übergeordneten Knotens – einschließlich Textknoten – angesprochen werden, was dabei hilft, das geeignete Element auf einer Seite zur Manipulation zu identifizieren.

Ereignisbeobachter

Event-Listener ermöglichen es uns zu spezifizieren, welche Aktionen unternommen werden sollen, wenn bestimmte Ereignisse innerhalb des DOM auftreten, wie das Klicken auf einen Link oder das Überfahren eines Elements mit dem Mauszeiger.  Durch die Verwendung von Event-Listenern fügen wir einer Website Interaktivität hinzu.  Wir verbinden einen Event-Listener mit einem Element, indem wir die Methode „addEventListener“ verwenden und angeben, auf welchen Ereignistyp gehört werden soll sowie welche Funktion ausgeführt werden soll, wenn dieses Ereignis erkannt wird.

Bausteine des Webs

Die Kenntnis des DOM ermöglicht es Entwicklern, dynamische Erfahrungen auf einer Website zu schaffen, sodass Benutzer auf intuitive Weise mit Elementen interagieren können. Durch das Verständnis der Grundlagen des DOM werden Entwickler in der Lage sein, Websites zu erstellen, die interaktiver und ansprechender sind als je zuvor.