Wir gucken uns jetzt etwas an, das nennt sich dynamisches HTML.

Da hat man folgende Idee.

Wir hatten ja gesehen, wie wir in Bottle, auf dem Web-Server, HTML programmieren können.

Wir können Programme schreiben, die HTML-Dokumente basteln.

Und dann wird das HTML-Dokument über den Draht irgendwie in den Browser geschickt.

Und der Browser, was macht der damit? Der kriegt dieses HTML-Dokument.

Und dann palst du das in einen Baum.

Dieser Baum ist so wichtig für den Browser, dass er einen speziellen Namen kriegt.

Das ist das DOM für Domain Object Model.

Das ist ein ganz toller Name.

Kann man sich nichts darunter vorstellen.

Das ist sozusagen das Modell, das Objektmodell für das HTML-Dokument.

Es ist einfach eine ganz, es ist eine vornehme Art und Weise zu sagen,

ja, wir haben hier eine gute Datenstruktur.

Und diese Datenstruktur haben wir im Speicher.

Und das Tolle an der Datenstruktur ist, dass wir die Datenstruktur verändern können.

Das HTML-Dokument können wir nicht mehr richtig verändern, aber das DOM, das können wir verändern.

Und das werden wir jetzt auch tun.

Und jetzt könnte man sich sagen, na ja, wir verändern einen Baum im Speicher, meine Güte.

Jetzt kommt der zweite Trick, den man verstehen muss.

Dass der Browser, der uns ja eigentlich das, was wir hier wollen, ist das,

und wir haben hier ein HTML-Dokument, das hat den Titel Welcome.

Und das hat im Body einen Paragraphen mit Hello World stehen.

Also wir wollen irgendwie im Wesentlichen sowas hier sehen.

Da stellen Sie sich mal von das hier als einen vereinfachten Browser vor.

Und jetzt ist das Folgende ganz wichtig zu verstehen.

Der Browser baut als erstes das DOM.

Und dann gibt es etwas, das nennt sich Painting.

Dann malt er sozusagen sein Window voll.

Und zwar, indem er über den Baum drüber geht und für jeden Element, Knoten, den er findet, ein kleines Rechteck macht.

Ja, nämlich er guckt sich das Rechteck, oder viele.

Das HTML sagt, na ja, ist klar, das ist die Wurzel, da fangen wir an.

Und dann kommt der Head-Knoten und der sagt, okay, da sind sozusagen Metadaten drin.

Und dann kommt er irgendwo an das Titel-Element.

Und dann guckt er sich an, was steht denn da drin?

Ja, ah, da steht Welcome drin.

Und dann weiß er, aha, das muss ich oben in diesen Reiter vom Tab irgendwie reinschreiben.

Und dann geht er in den Body-Knoten und da kommt er in einen P.

Und was heißt denn P? Achtung, ich muss ein Kästchen machen.

Mit oder ohne Rand, typischerweise ohne Rand.

Und dann muss ich den Inhalt diesen Textknoten da rein tun, nämlich da tue ich den Hello World Knoten rein.

Okay.

Das heißt, ich gehe durch den Baum und für alle Knoten überlege ich mir, wie will ich diese Knoten malen?

Und was wir eben gelernt haben, ist, dass wir, wie die gemalt werden,

wie die in Pixel umgewandelt werden, dass das von CSS beeinflusst wird.

Das heißt, was passiert ist, dass der Browser durch den Baum durchgeht und sich für jeden dieser Knoten anguckt.

Achtung, was sagt mir das CSS?

Ja, und dann, ah ja, ich mache das hellblau und den Text da drin leuchtend orange oder sowas.

Dann weiß ich ja schon, wie ich das malen soll.

Und jetzt kommt das Tolle.