Einführung
Was ist das HTML-BOM?
Das BOM (Browser Object Model) ist eine Eigenschaft von Browsern, die es Skripten erlaubt, mit dem Browser zu interagieren. Das BOM ist keine standardisierte Schnittstelle und kann von Browser zu Browser variieren. Es besteht aus den Objekten „document“, „screen“, „location“ „history“ und „navigator“, die wiederum zum Objekt „window“ gehören. Über diese Objekte kann das Browser-Fenster manipuliert und dessen Eigenschaften ausgelesen werden. Ein Teil des BOM ist das DOM (Document Object Model), das durch das „document“-Objekt repräsentiert wird:
Einsatzgebiete des BOM
Das „windows“-Objekt wird von allen namhaften Browsern unterstützt. Mit JavaScript kann auf das „windows“-Objekt zugegriffen und so mit dem Browser-Fenster interagiert werden. Ein einfaches Beispiel ist das Auslesen der Größe des Browser-Fensters mit „innerHeight“ und „innerWidth“:
HTML-Datei:
Ergebnis:
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 |