navigation Navigation

MB arrow_forward Projekte arrow_forward Leistungen arrow_forward Docs arrow_forward

Document Object Model - Einführung

Das Document Object Model (DOM) bildet die Schnittstelle zwischen HTML-Dokumenten und JavaScript. Als hierarchische Baumstruktur repräsentiert das DOM sämtliche Elemente einer Webseite und ermöglicht deren dynamische Manipulation zur Laufzeit. Diese fundamentale Web-Technologie erlaubt es Entwicklern, auf Elemente zuzugreifen, diese zu verändern, hinzuzufügen oder zu entfernen, was die Grundlage für interaktive Webanwendungen bildet. In dieser Einführung werden die grundlegenden Konzepte des DOM, seine Struktur sowie die wichtigsten Methoden zur programmatischen Steuerung von Webseiteninhalten erläutert.

Inhaltsverzeichnis

    Einführung

    Das DOM ist eine plattform- und sprachneutrale Schnittstelle, die Programmen und Skripten erlaubt, auf den Inhalt, die Struktur und den Stil von Dokumenten zuzugreifen und diese zu aktualisieren. Es repräsentiert das Dokument als eine logische Baumstruktur aus Knoten (Nodes) und Objekten. Jeder Knoten in diesem Baum repräsentiert einen Teil des Dokuments, wie beispielsweise ein Element, ein Attribut oder ein Textstück. Diese objektorientierte Repräsentation ermöglicht es Skriptsprachen wie JavaScript, die Website zu modifizieren. Beispielsweise spezifiziert das DOM, dass eine Methode wie querySelectorAll eine Liste aller Elemente zurückgeben soll, die einem bestimmten Kriterium entsprechen, etwa alle <p> Elemente in einem Dokument.

    Alle Eigenschaften und Ereignisse, die zur Manipulation von Webseiten zur Verfügung stehen, sind in diesen Objekten organisiert. Das document Objekt repräsentiert das Dokument selbst, während table Objekte die HTMLTableElement Schnittstelle für HTML-Tabellen implementieren.

    Das DOM ist nicht monolitisch, sondern baut auf mehreren APIs auf. Das Kern-DOM (Core DOM) definiert die grundlegenden Entitäten und Objekte innerhalb jedes Dokuments. Darauf aufbauend erweitern spezifische APIs wie das HTML DOM API oder SVG API diese Kernfunktionalität, um Unterstützung für spezifische Dokumententypen hinzuzufügen.

    Das DOM fungiert als eine Abstraktionsschicht. Es nimmt die oft komplexe und textbasierte Struktur eines HTML- oder XML-Dokuments und transformiert sie in ein logisches, speicherinternes Modell, mit dem Programmiersprachen auf eine standardisierte Weise interagieren können.

    Repräsentation der Dokumente in DOM

    Unabhängig davon, ob eine Webseite in einem Browser angezeigt wird oder als HTML-Quelltext vorliegt, stellt das DOM sie als eine logische Baumstruktur dar. Jeder Teil des Dokuments - vom Dokument als Ganzes über einzelne Elemente wie den Kopfbereich (<head>), Tabellen (<table>), Tabellenüberschriften (<th>) bis hin zum Text innerhalb von Zellen (<td>Text</td>) - wird als Teil dieses Dokument-Objekt-Modells betrachtet. Diese Teile werden als Knoten und Objekte repräsentiert, was sie über Skriptsprache zugänglich und manipulierbar macht.

    Die hierarchische Natur dieser Baumstruktur ist entscheidend. Ein <html> Element hat typischerweise Kinder wie <head> und <body>. Das <body> Element wiederum kann viele weitere Kind-Elemente enthalten, die ihrerseits Kinder haben können. Diese Eltern-Kind-Beziehungen und Geschwister-Beziehungen sind, die das Traversieren (Durchlaufen) und die gezielte Auswahl von Elementen ermöglichen.

    Beziehungen zu JavaScript und Webseiten

    Obwohl das DOM selbst keine Programmiersprache ist, ist es für die Interaktion von JavaScript mit Webseiten unerlässlich. Ohne das DOM hätte JavaScript kein Modell oder Verständnis von Webseiten, HTML-Dokumenten, SVG-Dokumenten und deren Bestandteilen. JavaScript verwendet das DOM, um auf das Dokument und seine Elemente zuzugreifen und diese zu manipulieren.

    Es ist wichtig zu verstehen, dass das DOM eine Web API ist und nicht ein Bestandteil der JavaScript-Sprache selbst. JavaScript kann auch in anderen Kontexten eingesetzt werden, beispielsweise in NodeJS-Umgebungen serverseitig, wo das DOM API keine Kernkomponente darstellt. Das DOM wurde sprachunabhängig konzipiert, um eine konsistente API für die strukturelle Repräsentation eines Dokuments zu bieten, auch wenn die meisten Webentwickler es primär mit JavaScript verwenden.

    Um das DOM zu verwenden, setzen Entwickler dessen API direkt in JavaScript-Skripten ein, die von einem Browser ausgeführt werden. Dies ermöglicht die unmittelbare Manipulation der document oder window Objekte oder jeglicher Nachfahrenelemente innerhalb von Webseite. Obwohl es generell empfohlen wird, die HTML-Struktur von der DOM-Manipulation in JavaScript zu trennen, kann JavaScript neue Elemente erstellen, ihnen Text hinzufügen und sie dem Baum des Dokuments anhängen.

    Fundamentale Datentypen in DOM

    Das DOM API arbeitet mit verschiedenen fundamentalen Datentypen. Auch, wenn oft pauschal von “Elementen” gesprochen wird, ist nicht jeder Knoten streng genommen ein Element.

    Zu den wichtigsten Datentypen gehören:

    • Document: Repräsentiert das Wurzelobjekt des Dokuments selbst. Es ist der Einstiegspunkt zum Inhalt des Dokuments.
    • Node: Jedes Objekt innerhalb eines Dokuments ist ein Knoten. In HTML kann dies ein Element-Knoten, ein Text-Knoten oder ein Attribut-Knoten sein. Node ist die Basisschnittstelle für viele anderen DOM-Typen.
    • Element: Basiert auf Node und bezieht sich auf ein Element oder einen Knoten vom Typ element (z.B. <p>, <div>). Element-Objekte implementieren die Element-Schnittstelle und die grundlegende Node-Schnittstelle. In HTML werden sie durch HTMLElement und andere spezifische Schnittstellen weiter spezialisiert.
    • NodeList: Eine array-ähnliche Sammlung von Knoten, typischerweise zurückgegeben von Methoden wie document.querySelectorAll(). Auf Elemente kann über einen Index zugegriffen werden.
    • Attr: Repräsentiert ein Attribut eines Elements, das im DOM ebenfalls als Knoten betrachtet wird, obwohl es nicht Teil des Haupt-Dokumentenbaums im Sinne von Eltern-Kind-Beziehungen ist.
    • NamedNodeMap: Ähnlich einem Array, aber Elemente werden über ihren Namen oder Index angesprochen, wobei die Reihenfolge nicht garantiert ist. Wird typischerweise für Attributsammlungen verwendet.

    Die Baumstruktur des DOM kann, insbesondere bei sehr großen und tief verschachtelten Dokumenten, Performance-Implikationen haben. Operationen, die den gesamten Baum oder großte Teile davon durchlaufen, können rechenintensiv sein. Ein effizienter Umgang mit dem DOM, insbesondere bei der Auswahl und Manipulation von Elementen, ist daher für die Leistungsfähigkeit von Web-Anwendungen von Bedeutung.

    DOM-Schnittstellen (Interfaces)

    Objekt im DOM können mehrere Schnittstellen implementieren. Ein HTML <form> Elementen-Objekt könnte beispielsweise seine name Eigenschaft von der HTMLFormElement Schnittstelle und seine className Eigenschaft von der HTMLElement Schnittstelle erhalten.

    Ein <table> Objekt implementiert die spezialisierte HTMLTableElement Schnittstelle, die Element Schnittstelle (da es ein HTML-Element ist) und die grundlegende Node Schnittstelle (da es ein Knoten im Baum ist).