Document Object Model (DOM)

Copyright © Shutterstock / BEST-BACKGROUNDS

Was ist ein Document Object Model?

Das Document Object Model (DOM) ist eine plattformübergreifende und sprachunabhängige Anwendungsprogrammier-Schnittstelle. Diese Schnittstelle behandelt ein XHTML– oder XML-Dokument als Baumstruktur, während jeder Knoten (Verknüpfungspunkte der Übertragungswege) ein Objekt ist und einen Teil des Dokuments darstellt (z. B. Überschrift, Absatz, Tabelle, Video).

Die Objekte können programmatisch manipuliert werden und alle sichtbaren Änderungen, die als Ergebnis auftreten, können sich dann in der Anzeige des Dokuments widerspiegeln.

Die grundlegende Standardisierung von Document Object Model (DOM) wurde vom World Wide Web Consortium übernommen, das im Jahr 2004 eine Empfehlung entwickelt hatte. WHATEG (Web Hypertext Application Technology Working Group) übernahm diese Standard-Entwicklung und veröffentlichte es als lebendiges Dokument. Das W3C veröffentlichte nun stabile Momentaufnahmen des WHATEG-Standards.

Funktion

Die Webseite steht dem Browser nur als Text zur Verfügung. Dieser Text ist zunächst mit einer Auszeichnungssprache in HTML formatiert.

Der Browser empfängt sodann den Code über das Netzt und verarbeitet diesen. Diese Aufgabendurchführung erfolgt über den Parser (Prüfung, ob eine Folgenreihe aus Symbolen aus der Grammatik heraus in eine Quellsprache erzeugt werden kann). Anschließend transportiert der Parser den HTML-Code in eine Objektstruktur, die aus komplexen Knoten besteht (z. B. Element-, Attribut- und Textknoten).

Für alle weiteren Operationen verwendet der Browser nun diese Objektstruktur – jedoch nicht den HTML-Quellcode. Besonders CSS und JavaScript greifen nicht auf den HTML-Code als Text zurück, sondern auf den vorhandenen Elementenbaum im jeweiligen Speicher.

Standards des Document Object Model (DOM)

Die W3C DOM Working Group veröffentlichte ihre endgültige Empfehlung und löste sich 2004 auf. Die Entwicklungsbemühungen migrierten auf die WHATEG, die weiterhin einen Standard aufrechterhält. Im Jahr 2009 hat die Gruppe Web Applications die Document Object Model (DOM)-Aktivitäten am W3C neu organisiert.

Später, im Jahr 2013, wurde die DOM-Level-4-Spezifikation aufgrund fehlender Fortschritte und der bevorstehenden Veröffentlichung von HTML5 oder HTML-Arbeitsgruppe neu zugewiesen, um die Fertigstellung voranzutreiben. In der Zwischenzeit wurde die Gruppe Web Applications im Jahr 2015 aufgelöst und die DOM Stewardship an die Web Platform Group weitergegeben. Beginnend mit der Veröffentlichung von DOM Level 4 im Jahr 2015 erstellte das W3C neue Empfehlungen, die auf Momentaufnahmen der WHATEG-Standards basierten.

Web Browser

Um ein Dokument wie eine HTML-Seite zu rendern (Erstellung einer Grafik aus einer Skizze), verwenden die meisten Webbrowser ein internes Modell, das dem Document Object Model (DOM) ähnelt. Die Knoten jedes Dokuments sind in der Baumstruktur organisiert, die als DOM–Baum bezeichnet wird, wobei der oberste Knoten Dokumentenobjekt genannt wird. Wenn eine HTML-Seite in Browsern gerendert wird, lädt der Browser das HTML in den lokalen Speicher und analysiert es automatisch, um die Seite auf dem Bildschirm anzuzeigen.

JavaScript

Wenn eine Webseite geladen wird, erstellt der Browser ein Document Object Model (DOM) der Seite, das eine objektorientierte Darstellung eines HTML-Dokuments ist. Es dient als Schnittstelle zwischen JavaScript und dem Dokument selbst und ermöglicht die Erstellung dynamischer Webseiten.
JavaScript kann alle HTML-Elemente und -Attribute auf der Seite hinzufügen, ändern und entfernen, alle CSS-Stile ändern, auf vorhandene Ereignisse auf der Seite reagieren und neue Ereignisse erstellen.

Implementierung

Da Document Object Model (DOM) die Navigation in jede Richtung unterstützt und beliebige Modifikationen zulässt, muss eine Implementierung mindestens das Dokument puffern, das bisher gelesen wurde (oder eine sogenannte geparste Form davon).

Layout-Engines

Webbrowser verlassen sich auf die Layout–Engines, um HTML in ein Document Object Model (DOM) zu zerlegen. Einige Layout-Engines, z. B. Trident/MSHTML, sind hauptsächlich oder ausschließlich mit einem bestimmten Browser verknüpft, wie z. B. der Internet Explorer. Andere, einschließlich Blink, WebKit und Gecko, werden von einer Reihe von Browsern wie Google Chrome, Safari, Firefox und Opera gemeinsam genutzt. Die verschiedenen Layout-Engines implementieren die Standards von Document Object Model (DOM) in unterschiedlichem Maße.