Document Object Model (DOM)

Document Object Model

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 ‚Ästjedoch 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.

lieferte ein vollst√§ndiges Modell f√ľr ein gesamtes HTML- oder XML-Dokument, einschlie√ülich der M√∂glichkeit, jeden Teil des Dokuments zu √§ndern.
wurde Ende 2000 ver√∂ffentlicht. Es f√ľhrte die Funktion getElementByld sowie ein Ereignismodell und Unterst√ľtzung f√ľr XML-Namespaces und CSS ein.
ver√∂ffentlicht im April 2004, hat die [url=https://de.ryte.com/wiki/xpath]XPath[/url]- und Tastatur-Ereignisbehandlung sowie eine Schnittstelle zum Serialisieren von Dokumenten als [url=https://de.ryte.com/wiki/XML]XML[/url] unterst√ľtzt.
wurde im Jahr 2015 publiziert. Es ist eine Momentaufnahme des WHATEG Standards.

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 DOMBaum 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 LayoutEngines, 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.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte