Was ist das DOM?

Ein Leser hat mich kürzlich gefragt, was das DOM sei. Er sagte, er habe es erwähnt und angedeutet gehört, sei sich aber nicht sicher, ob er es wirklich verstehe.

Das können wir ändern.

Aber das HTML, das Sie schreiben, wird vom Browser geparst und in das DOM umgewandelt.

Quelltext anzeigen zeigt Ihnen nur das HTML, aus dem diese Seite besteht. Es ist wahrscheinlich genau das HTML, das Sie geschrieben haben.

Es könnte wie ein anderer Code aussehen, wenn Sie zum Beispiel in Vorlagendateien einer Backend-Sprache arbeiten und die kompilierte HTML-Ausgabe nicht oft betrachten. Oder es gibt einen „Build-Prozess“, der stattfindet, nachdem Sie Ihr HTML geschrieben haben und der Code auf der Live-Website veröffentlicht wird. Vielleicht ist dieses HTML komprimiert oder anderweitig verändert.

Quelltext anzeigen ist eigentlich ein bisschen seltsam. Die einzigen Leute, die sich diesen Code ansehen würden, sind Entwickler, und alle großen Browser haben mittlerweile integrierte Entwicklertools. Es hat wahrscheinlich seinen Nutzen überschritten.

Wenn Sie im Panel der von Ihnen verwendeten DevTools die Dinge betrachten, die wie HTML aussehen, ist das eine visuelle Darstellung des DOM! Wir haben es gemacht!

Nun, ja, das tut es. Es wurde direkt aus Ihrem HTML erstellt, erinnern Sie sich. In den meisten einfachen Fällen sieht die visuelle Darstellung des DOM genauso aus wie Ihr einfaches HTML.

Aber es ist oft nicht dasselbe…

Wann unterscheidet sich das DOM vom HTML?

Hier ist eine Möglichkeit: Es gibt Fehler in Ihrem HTML, und der Browser hat sie für Sie behoben. Nehmen wir an, Sie haben ein <table>-Element in Ihrem HTML und lassen das erforderliche <tbody>-Element weg. Der Browser fügt einfach dieses <tbody> für Sie ein. Es wird im DOM vorhanden sein, sodass Sie es mit JavaScript finden und mit CSS gestalten können, auch wenn es nicht in Ihrem HTML vorhanden ist.

Der wahrscheinlichste Fall ist jedoch…

JavaScript kann das DOM manipulieren

Stellen Sie sich vor, Sie haben ein leeres Element wie dieses in Ihrem HTML

<div id="container"></div>

Später in Ihrem HTML gibt es ein kleines Stück JavaScript

<script>
  var container = document.getElementById("container");
  container.innerHTML = "New Content!";
</script>

Selbst wenn Sie kein JavaScript kennen, können Sie dieses Stück Code nachvollziehen. Auf dem Bildschirm sehen Sie Neuer Inhalt! statt nichts, denn dieser leere div wurde mit etwas, nun ja, neuem Inhalt gefüllt.

Wenn Sie DevTools verwenden, um die visuelle Darstellung des DOM zu überprüfen, sehen Sie

<div id="container">New Content!</div>

Was sich von Ihrem ursprünglichen HTML oder dem unterscheidet, was Sie in Quelltext anzeigen sehen würden.

Ajax und Templating

Lassen Sie uns hier nicht zu sehr ins Detail gehen, aber ich wette, Sie können sich vorstellen, dass, wenn Sie Ajax verwenden würden, um Inhalte von anderswo zu holen und auf die Seite zu bringen, das DOM ganz anders sein wird als Ihr ursprüngliches HTML. Dasselbe gilt für das Laden von Daten einer Art und die Verwendung von Client-Side-Templating.

Versuchen Sie, Gmail aufzurufen und den Quelltext anzuzeigen. Es ist nur ein Haufen Skripte und Daten vom ursprünglichen Seitenaufruf. Kaum wiedererkennbar im Vergleich zu dem, was Sie auf dem Bildschirm sehen.

JavaScript vs. das DOM

JavaScript ist eine Sprache, die der Browser liest und mit der er Dinge tut. Aber das DOM ist der Ort, an dem diese Dinge geschehen. Tatsächlich ist vieles von dem, was Sie vielleicht als „JavaScript-Ding“ bezeichnen würden, genauer gesagt eine „DOM-API“.

Zum Beispiel können wir JavaScript schreiben, das auf ein mouseenter-Ereignis auf einem Element wartet. Aber dieses „Element“ ist wirklich ein DOM-Knoten. Wir hängen diesen Listener über eine DOM-Eigenschaft an diesem DOM-Knoten an. Wenn dieses Ereignis eintritt, ist es der DOM-Knoten, der dieses Ereignis auslöst.

Entschuldigung, wenn ich mich bei einigen dieser Dinge falsch ausgedrückt habe. Aber Sie verstehen den Punkt hoffentlich. Das DOM ist hier die Lebensader. Es ist der Ort, an dem alles im Browser geschieht. JavaScript ist nur die Syntax, die Sprache. Es kann völlig außerhalb des Browsers ohne DOM-APIs verwendet werden (siehe Node.js).

Dieser Artikel ist nicht annähernd nerdig und tiefgründig genug für mich.

Nun, das DOM steht für „Document Object Model“ bla bla bla. Diesen Artikel wollte ich nicht schreiben (und bin nicht qualifiziert). Hier sind einige ausführlichere Artikel

• W3C: Was ist das Document Object Model?
• MDN: Einführung – Document Object Model
• Wikipedia: Document Object Model