Einführung
Was ist das DOM?
Das DOM (Document Object Model) ist eine vom W3C (World Wide Web Consortium) definierte plattform- und sprachenunabhängige Schnitt-stelle, die es Skripten erlaubt, dynamisch auf Dokumente zuzugreifen und deren Inhalt, Struktur und Aussehen zu verändern. Beim Laden einer Webseite erstellt der Browser aus dem HTML-Dokument das DOM, eine Baumstruktur von Objekten, basierend auf den HTML-Elementen des HTML-Dokuments. Die Elemente im DOM können dann mit Hilfe von JavaScript angesprochen, manipuliert und gelöscht werden. Außerdem können mit JavaScript auch neue Objekte dem DOM hinzugefügt werden. Diese Änderungen finden aber nur im Browser auf dem Rechner des Besuchers einer Webseite statt, während die HTML-Dokumente auf dem Webserver unangetastet bleiben.
Einsatzgebiete des DOM
Mit JavaScript kann über das DOM zur Laufzeit auf eine HTML-Seite zugegriffen und deren Elemente, Attribute und Events sowie CSS-Anweisungen manipuliert werden. Damit lassen sich dynamische Webseiten realisieren, d. h. Webseiten, die zur Laufzeit auf Benutzeraktionen reagieren. Erst seit dem DOM und der Möglichkeit Skriptsprachen im Browser zu verwenden wird das World Wide Web als dynamisch bzw. als Web 2.0 bezeichnet:
Webseiten mit HTML, CSS und JavaScript
Client-Server-Prinzip
Die Webseiten im World Wide Web bestehen i. d. R. aus HTML-, CSS- und JavaScript-Dateien, die von sog. Webservern bereitgestellt werden. Für das Anfragen, Empfangen und Darstellen von Webseiten werden Webbrowser verwendet. Für die Kommunikation zwischen Webserver und Webbrowser wird das Protokoll HTTP, bzw. die verschlüsselnde Variante HTTPS, verwendet.
Browser-Engine
Das Programm, das innerhalb eines Browsers den HTML-, CSS- und JavaScript-Code in eine darstellbare Webseite umwandelt, nennt sich Browser-Engine (auch Renderer oder Rendering-Engine). Die Stylesheets werden i. d. R. mit CSS beim Webdesign zusammen mit den HTML-Dokumenten erstellt. Wird keine CSS-Datei angegeben, verwenden Browser ihre eigenen Standard-Stylesheets. Eine Browser-Engine verwendet die Struktur und semantische Definitionen der Webseiten-Elemente aus dem HTML-Dokument und die Design-Definitionen aus der CSS-Datei und erstellt daraus die eigentliche Webseite.
Parser
Der Vorgang bei dem aus dem HTML-Dokument die Webseiten-Struktur entsteht wird als Parsen bezeichnet. Auch das Umsetzen der Definitionen aus dem CSS-Dokument wird als Parsen bezeichnet. Somit gibt es für die HTML-Dokumente und für die CSS-Dokumente in der Browser-Engine jeweils einen Parser.
Document Object Model
Beim HTML-Parsing wird basierend auf dem HTML-Dokument ein sog. „Document Objekt Model“ (kurz DOM) erstellt. Das DOM stellt die Webseiten-Struktur als hierarchischen Baum dar. Mit einer von Browsern unterstützten Programmiersprache (z. B. JavaScript), kann über das DOM auf die einzelnen Elemente einer Webseite zugegriffen und diese manipuliert werden.
Aufbau einer Browser-Engine
Eine Webseite besteht i. d. R. aus HTML-, CSS- und JavaScript-Dateien, die von einem Webserver an einen Webbrowser übertragen und von der Browser-Engine des Webbrowsers zur eigentlichen Webseite zusammengesetzt werden. Eine Browser-Engine besteht zusammenfassend mindestens aus einem HTML-Parser, einem CSS-Parser, einer JavaScript-Engine und einer Schnittstelle (API), über die der Browser auf die Browser-Engine zugreift. Durch diesen flexiblen Aufbau ist es auch möglich, dass verschiedene Browser die selbe Browser-Engine verwenden können.
Die bekanntesten Browser-Engines
Die folgende Tabelle zeigt die bekanntesten Browser-Engines und ihre hauptsächliche Verwendung:
| Browser-Engine | Verwendung | Bemerkungen |
| WebKit | Safari, (Chrome bis Vers. 27) | |
| Blink | Opera (ab Vers. 15), Chrome (ab Vers. 28) | 2013 von Webkit abgespalten |
| Gecko | Firefox | |
| Trident | Internet-Explorer für Windows | |
| Tasman | Internet-Explorer für Macintosh | |
| EdgeHTML | Microsoft-Edge für Windows 10 |