Definition „Document Object Model“ Was ist das DOM?

Das Document Object Model, kurz DOM, macht die Strukturen von HTML- und XML-Dokumenten auf standardisierte Weise für Entwickler zugänglich. So gibt es eine einheitliche Schnittstelle, über welche die Inhalte dieser Dokumente manipuliert werden können.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

DOM steht für Document Object Model. Es handelt sich um einen Standard aus der Webentwicklung. Das DOM bietet eine einheitliche Schnittstelle für Programmierer, über die sie unabhängig von Programmiersprache und Plattform auf die Struktur einer Webseite zugreifen können.

Alle Elemente eines HMTL-Dokuments werden in einer Baumstruktur abgebildet und so auf eine einheitliche Weise für Entwickler zugänglich gemacht. DOM kann außerdem die Strukturen eines XML-Dokuments auf die gleiche Weise lesbar und manipulierbar machen.

Warum wurde DOM erfunden?

Anfangs waren Webseiten noch statisch. Man legte per HTML eine Struktur fest, in der die Inhalte organisiert sein sollten. Diese Struktur war unveränderlich – man konnte also nicht im Nachhinein auf Seitenelemente zugreifen und sie z. B. unter bestimmten Bedingungen hervorheben oder verstecken.

Ein Dokument einer Webseite war im Prinzip kaum mehr als Text mit Anweisungen dazu, wie er beim Anzeigen im Browser formatiert sein soll. Dann entwickelte sich die Technologie weiter und Webseiten wurden dynamisch. Die Skriptsprache JavaScript erlaubte es beispielsweise, dass das einst statische Dokument einer Webseite zur Laufzeit verändert werden konnte.

Heute ist es ganz normal, dass sich einzelne Abschnitte einer Webseite jederzeit verändern können, z. B. durch das Nachladen von Inhalten oder durch Reaktionen auf die Eingaben eines Benutzers. Selbst komplexe Anwendungen wie Buchhaltungssoftware können im Browser abgebildet werden. Dazu ist es nötig, dass Entwickler präzise und zuverlässig auf die Elemente zugreifen können, aus denen die Webseite aufgebaut ist.

Diese Elemente müssen schließlich manipuliert werden, um nach dem Laden einer Webseite noch etwas daran verändern zu können. Anfangs war es noch kompliziert, die verschiedenen Technologien in allen Browsern so zu steuern, dass sie immer das gewünschte Ergebnis lieferten. Deshalb schuf das World Wide Web Consortium (W3C) im Jahr 1998 den ersten Entwurf des DOM, einer universellen Programmierschnittstelle für HTML- und XML-Dokumente.

Wie ist ein DOM-Tree aufgebaut?

DOM macht aus Markup, also z. B. HTML oder XML, eine Baumstruktur, den DOM-Tree. In diesem Baum sind alle Elemente des Dokuments in hierarchischer Form als Knoten hinterlegt, also z. B. alle HTML-Tags eines HTML-Dokuments. So werden nicht nur die einzelnen Elemente abgebildet, sondern auch ihre Beziehung zueinander.

In HTML- und XML-Dokumenten kommt es regelmäßig vor, dass manche Elemente anderen Komponenten untergeordnet sind. Wenn der Entwickler auf das übergeordnete Element zugreift, will er damit in vielen Fällen auch alle untergeordneten Informationen beeinflussen. Deshalb ist es essenziell, dass diese hierarchische Ordnung erhalten bleibt.

In einem HTML-Dokument sieht die grundlegende Struktur beispielhaft so aus:

• Wurzel des Baumes ist das HTML-Tag, weil ein HTML-Dokument damit beginnt.

• Von der Wurzel gehen mindestens die beiden Knoten HEAD und BODY ab.

• Dem Knoten HEAD sind Informationen wie der Titel des Dokuments, Metainformationen oder eingebundene Komponenten wie Skripte oder Stylesheets untergeordnet.

• Dem Knoten BODY sind alle Knoten untergeordnet, die den Inhalt der Seite wiedergeben, z. B. diverse Überschriften, Absätze oder Container.

Bei einem XML-Dokument liefert das DOM eine Repräsentation der XML-Baumstruktur. Sie kann ebenso zum Auslesen, Verarbeiten, Löschen, Erstellen und Manipulieren von XML-Elementen verwendet werden.

Wie wird DOM heute genutzt?

Der hauptsächliche Einsatzzweck ist auch heute noch der, für den das DOM einst geschaffen wurde, nämlich als Programmierschnittstelle für die einheitliche Darstellung von Internetseiten. Browser nutzen DOM z. B., um den Inhalt einer gerenderten Webseite nach dem aktuellen Standard darzustellen.

Ein Developer kann also eine Webseite erstellen und davon ausgehen, dass jeder Browser, der DOM korrekt beherrscht, die Elemente wie gewünscht anzeigen kann. Ferner kann er sich darauf verlassen, dass er zur Laufzeit der Webseite über das DOM Zugriff auf einzelne Komponenten des Dokuments hat, z. B. um nach Bedarf die angezeigten Informationen optisch oder inhaltlich anzupassen, nicht mehr benötigte Elemente zu löschen oder gänzlich neue Elemente an einer vorbestimmten Stelle hinzuzufügen.

Was ist Shadow DOM?

2012 führte W3C das Shadow DOM als eine der elementaren Bestandteile der Web Components ein. Moderne Browser behandeln diese Konstrukte wie herkömmliches DOM. Die Besonderheit ist, dass das Shadow DOM nicht für das gesamte Projekt zugänglich ist, sondern sich nur in einem zuvor definierten Kontext manipulieren lässt, z. B. nur innerhalb einer bestimmten Komponente.

Zunehmend komplexer werdende Webprojekte mit immer mehr Komponenten sollen somit robuster werden. Man kann einzelne Elemente besser isolieren und unabhängig vom Rest der Webseite programmieren. Unter anderem kann mit Shadow DOM vermeiden werden, dass unbeabsichtigt auf eine Komponente zugegriffen wird. Der Zugriff von außerhalb kann bewusst erlaubt oder untersagt werden.

(ID:48000295)