Die Erfindung von Ja­va­Script Mitte der 1990er-Jahre bedeutete einen tiefen Ein­schnitt für das World Wide Web. Vormals aus­schließ­lich statische Websites ent­wi­ckel­ten sich – dank ent­spre­chen­der Elemente in der berühmten Skript­spra­che – zu immer dy­na­mi­sche­ren Web­pro­jek­ten. Browser-Her­stel­ler re­agier­ten mit der Im­ple­men­tie­rung passender In­ter­pre­ter und dem Entwurf eigener Modelle für dy­na­mi­sches HTML (DHTML). Erst durch diese In­ter­pre­ter und Modelle wurden um­fang­rei­che struk­tu­rel­le und optische Än­de­run­gen des Web­do­ku­ments während der Anzeige im Browser möglich, die es erlaubten, das volle Potential von Ja­va­Script aus­zu­schöp­fen.

Da die ver­schie­de­nen Techniken al­ler­dings kei­nes­wegs auf­ein­an­der ab­ge­stimmt waren, waren sie für Web­ent­wick­ler, die ihr dy­na­mi­sches Projekt für alle Browser anbieten wollten, mit einem er­heb­li­chen Aufwand verbunden. 1998 ver­öf­fent­lich­te das W3C-Kon­sor­ti­um aus diesem Grund die erste Spe­zi­fi­ka­ti­on des Document Object Models (DOM), das als uni­ver­sa­le Schnitt­stel­le bis heute eine zentrale Rolle in der Ja­va­Script-Pro­gram­mie­rung spielt.

Was ist das Document Object Model (DOM)?

Das Document Object Model (dt. Do­ku­men­ten-Objekt-Modell), kurz DOM, ist eine stan­dar­di­sier­te Pro­gram­mier­schnitt­stel­le für die Struk­tu­rie­rung von HTML- und XML-Do­ku­men­ten. Ent­wi­ckelt und ver­öf­fent­licht wurde sie vom World Wide Web Con­sor­ti­um (W3C), der 1994 von Web-Erfinder Tim Berners-Lee ge­grün­de­ten Or­ga­ni­sa­ti­on für den Entwurf und das Eta­blie­ren von Standards für das World Wide Web.

Zweck des Document Object Models ist es, Pro­gram­mie­rern den Zugriff auf die Kom­po­nen­ten eines Web­pro­jekts und damit das Hin­zu­fü­gen, Löschen oder Be­ar­bei­ten von Inhalten, At­tri­bu­ten und Styles so einfach wie möglich zu machen. DOM dient als platt­form­un­ab­hän­gi­ges und sprach­neu­tra­les Bin­de­glied zwischen Skript­spra­chen wie Ja­va­Script und dem zu­grun­de­lie­gen­den Web­do­ku­ment, indem es den Aufbau des Dokuments in einer Baum­struk­tur darstellt, in der jeder Knoten ein ei­gen­stän­di­ges, an­steu­er­ba­res Objekt ist. Aufgrund dieser Struk­tu­rie­rungs­form be­zeich­net man die auf diese Art dar­ge­stell­te Variante eines Web­pro­jekts auch als DOM-Tree (dt. DOM-Baum).

Hinweis

Anders als es der Name vermuten lässt, handelt es sich bei DOM ei­gent­lich nicht um ein Modell, sondern wie bereits erwähnt um eine Pro­gram­mier­schnitt­stel­le. Al­ler­dings kann ein Document Object Model im über­tra­ge­nen Sinne als Modell für die Art und Weise des Zugriffs auf die als Objekt dar­ge­stell­ten Webdaten angesehen werden.

Wo und wann kommen DOM-Trees zum Einsatz?

Das Document Object Model wurde für den Einsatz im World Wide Web ent­wi­ckelt und ist auch vor allem dort im Einsatz. Genauer gesagt sind es die je­wei­li­gen Browser, mit denen Nutzer auf die Angebote des Webs zu­rück­grei­fen, die von der stan­dar­di­sier­ten Schnitt­stel­le Gebrauch machen.

So nutzen gängige Web­cli­ents DOM bzw. auf DOM ba­sie­ren­de Schnitt­stel­len, um auf­ge­ru­fe­ne HTML- bzw. XML-Seiten zu rendern. Bei diesem Prozess werden die einzelnen Kom­po­nen­ten als Knoten zu­sam­men­ge­fasst und in einem in­di­vi­du­el­len DOM-Tree or­ga­ni­siert. Parallel lädt der jeweilige Browser diese ge­r­en­der­te Version des Web­do­ku­ments in den lokalen Speicher, um sie dort zu ana­ly­sie­ren bzw. zu ver­ar­bei­ten und ab­schlie­ßend die Seite in der vom Ent­wick­ler vor­ge­se­he­nen Form prä­sen­tie­ren zu können. Für das Rendering setzen die Browser auf ver­schie­de­ne Engines (Rendering-Software) wie Gecko (Firefox), WebKit (Safari) oder Blink (Chrome, Edge, Opera), die sich ebenfalls auf den DOM-Standard stützen.

z0HN-fG6oT4.jpg Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern.

Als ob­jekt­ori­en­tier­te Prä­sen­ta­ti­on eines Web­do­ku­ments bleibt das Document Object Model außerdem auch nach der Ausgabe relevant – als Schnitt­stel­le für sämtliche pro­gram­mier­ten dy­na­mi­schen Inhalte und somit für sämtliche Nut­zer­inter­ak­ti­on, die das Aussehen der Seite während der Ausgabe verändern können.

Hinweis

Als eine der vier Säulen der so­ge­nann­ten Web Com­pon­ents hat das W3C-Kon­sor­ti­um 2012 eine spezielle Schnitt­stel­le mit dem Namen Shadow DOM ein­ge­führt. Diese er­mög­licht es, das ei­gent­li­che Document Object Model eines Web­do­ku­ments beliebig durch ei­gen­stän­di­ge Un­ter­bäu­me (Shadow Trees) zu erweitern.

Wie ist das Document Object Model aufgebaut?

HTML-Markups de­fi­nie­ren Be­zie­hun­gen zwischen den ver­schie­de­nen ent­hal­te­nen Tags. So sind die per Tag ge­kenn­zeich­ne­ten Elemente eines Web­do­ku­ments bei­spiels­wei­se abhängig von ihrer Rolle im Web­pro­jekt über- oder un­ter­ge­ord­net. Zudem können manche Tags in anderen Tags enthalten sein. Um eben diese Hier­ar­chien auch im Document Object Model adäquat wie­der­zu­ge­ben, greift die Schnitt­stel­le auf die bereits erwähnte Baum­struk­tur zurück, die es möglich macht, die ge­r­en­der­ten Objekte ent­spre­chend zu ar­ran­gie­ren.

Wie genau ein DOM-Tree aufgebaut ist, hängt also immer von dem zu­grun­de­lie­gen­den HTML- bzw. XML-Dokument ab. Für Ersteres lässt sich aber folgende, pro­jekt­über­grei­fen­de Grund­hier­ar­chie fest­hal­ten:

Bild: DOM-Grundhierachie für HTML-Dokumente
Die Objekte des minimalen Document Object Models spiegeln das HTML-Grund­ge­rüst wider.

Wie im HTML-Grund­ge­rüst steht das HTML-Objekt selbst in der Hier­ar­chie an oberster Stelle. Un­ter­ge­ord­net sind ihm der Header (Kopfzeile) und der Body (Hauptteil) der Website. Bei Letzterem ist davon aus­zu­ge­hen, dass er min­des­tens einen Paragraph (Abschnitt mit Text­in­halt) enthält.

Hinweis

Die einzelnen Ab­spal­tun­gen im DOM-Tree werden als Nodes bzw. Knoten be­zeich­net. Zu­sätz­lich wird zwischen Ele­ment­kno­ten wie den oben zu sehenden HTML-, Body-, Header- oder Paragraph-Objekten, At­tri­but­kno­ten wie „align“ oder „size“ und Text­kno­ten un­ter­schie­den.

Document Object Model: Praxis-Beispiel (inklusive HTML-Code)

Nachdem wir die Funktion und den ge­ne­rel­len Aufbau des Document Object Models in den ver­gan­ge­nen Ab­schnit­ten aus­führ­lich unter die Lupe genommen haben, soll die für Web-Skript­spra­chen ele­men­ta­re Struk­tu­rie­rungs­tech­nik ab­schlie­ßend anhand eines konkreten Beispiels ver­deut­licht werden. Als Grundlage dient folgendes einfaches HTML-Dokument mit Header (inkl. Ver­lin­kung auf CSS-Style­sheet) und Body sowie zwei Content-Elementen (Bild und Text):

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <p><strong>Hallo Welt!</strong></p>
        <div><img src="bild.jpg"></div>
    </body>
</html>

Der aus diesem HTML-Code ge­ne­rier­te DOM-Tree sieht fol­gen­der­ma­ßen aus:

Bild: Grafische Darstellung eines DOM-Trees
Das HTML-Element steht in der Hier­ar­chie eines Web­do­ku­ments an erster Stelle.

Al­ter­na­tiv finden Sie häufig auch folgende Prä­sen­ta­ti­ons­form für das hier ver­wen­de­te Document-Object-Model-Beispiel:

DOCTYPE: HTML
HTML
----head
-  ---- meta
-  ---- link
-  ---- title
----body
-  ---- p
-    ---- strong
-      ---- TEXT: Hallo Welt!
-  ---- div
-    ---- img
Zum Hauptmenü