Document Object Model (DOM), was im Grunde der Webentwickler-Jargon für „wie Webseiten hinter den Kulissen funktionieren“ ist, sollte jeder Webentwickler kennen ihr Werkzeugkasten. Es ist wie die geheime Soße, die die moderne Webentwicklung antreibt.

Aber warum DOM? Ich bin kürzlich auf ein Video gestoßen, das zeigt, wie Browser funktionieren, und habe mich dann mit einigen Artikeln beschäftigt, und das ist mein Verständnis des „Warum?“

Jeder Browser arbeitet mit einer **Browser-Engine**, die eine Kernkomponente eines Webbrowsers ist und für die Darstellung von Webinhalten, einschließlich HTML, CSS und JavaScript, in einer visuellen Darstellung verantwortlich ist, mit der Benutzer interagieren können.

Das „Dokument“: Dieser Begriff bezieht sich auf eine Webseite, die in einen Webbrowser geladen wird. Es stellt die strukturierte Hierarchie des Inhalts der Webseite dar, einschließlich Elementen wie Überschriften, Absätzen, Bildern, Links, Formularen und mehr. Das DOM-Dokument ist im Wesentlichen eine speicherinterne Darstellung der Struktur der Webseite, die von der Rendering-Engine des Browsers erstellt wird, wenn die Seite geladen wird.

Jetzt kommt der interessante Teil, wie die Browser-Engine das Dokument in einen Knotenbaum umwandelt, den wir als DOM zum Malen kennen.

Nach dem Herunterladen des Dokuments wird es in Rohdaten konvertiert, ja, Nullen und Einsen. Und diese Rohdatenbytes werden in Zeichen umgewandelt. Diese Konvertierung erfolgt basierend auf der Zeichenkodierung der HTML-Datei.

Diese Zeichen werden weiter in sogenannte Tokens analysiert. Wie jedes andere Programmiersprachen-Token kann es als das kleinste einzelne Element dieser Programmiersprache definiert werden, das von Bedeutung ist. Hier bezieht sich Token auf die Tags in HTML, nämlich body,h1,h2, p,span usw.

Sobald die Tokenisierung abgeschlossen ist, besteht der nächste Schritt darin, diese Token zu strukturieren. Hier kommen Objekte ins Spiel.Aus diesen Token wird ein Objekt erstellt. Dieses Objekt enthält zahlreiche Informationen zu den einzelnen Entitäten, einschließlich Tag-Start, Tag-Ende, Attribute, Daten/Werte und mehr.

Jetzt haben wir ein „Dokument“ und „Objekte“, aber es ist immer noch unstrukturiert, da keine Beziehung zwischen diesen Objekten besteht. Nach der Tokenisierung werden diese Token in Knoten umgewandelt. Jeder Knoten hat eine Beziehung zu einem anderen, bestehend aus übergeordneten, untergeordneten und Geschwisterknoten. Diese Knoten-zu-Knoten-Beziehungen bilden eine bekannte baumartige Struktur. Dieser Vorgang wird als Modellieren des Objektbaums bezeichnet. Nun ist ein Knotenbaummodell aus dem HTML-Dokument fertig und kann gezeichnet werden.

Um es noch einmal zusammenzufassen: Der Name „Dokumentobjektmodell“ spiegelt seinen Zweck und seine Funktion wider. Es dient als strukturiertes Modell für Webseiteninhalte, dargestellt als eine Sammlung von Objekten. Der Name „DOM“ entstand aus der Verschmelzung von „Document“ (die Webseite), „Object“ (die Elemente darstellen) und „Model“ (die strukturierte Darstellung).

Ich hoffe, das hilft Ihnen, und Sie können uns gerne Feedback geben oder fragen, wenn Sie spezielle Fragen oder Bedenken haben.