studyklar
IProg · Skript 2 · Abschnitt 1

Das DOM: eine HTML-Seite als Baum aus Knoten

JavaScript kann eine Seite nur ändern, wenn es an ihre Teile herankommt. Dafür baut der Browser aus dem HTML einen Baum: das DOM. Hier entsteht dieser Baum Schritt für Schritt aus der Beispielseite des Skripts. Rechts wächst der Baum mit. Mit Weiter geht es Schritt für Schritt voran.

Worum es geht

Skript 02 (JavaScript 1), Folien 2 bis 6, 12 und 14: dynamisches HTML, das Document Object Model (DOM) und die DOM-Sicht auf ein HTML-Dokument.

Eine Seite soll auf den Benutzer reagieren: ein Text ändert sich beim Klick, ein Menü klappt auf. Dazu muss ein Programm im Browser jedes Stück der Seite finden und ändern können. Die Frage dieses Abschnitts: Wie sieht der Browser eine HTML-Seite?

So gehen wir vor:

  1. Klären, was „dynamisches HTML“ braucht.
  2. Das DOM nach dem Skript erklären.
  3. Die Beispielseite von Folie 4 Knoten für Knoten in einen Baum übersetzen.
  4. Mit JavaScript nachsehen, welche Knoten wirklich da sind.
  5. Eine kurze Klausurfrage dazu.

Dynamisches HTML

Skript · Folie 2

Ziel: Reaktion der HTML-Seite auf Benutzer-Interaktion (Veränderung des Aussehens, Einblenden von Zusatzinformationen, Aufklappen von Menüs). Erfordert ein Modell zum Zugriff auf die Komponenten der Webseite zur Laufzeit: Document Object Model (DOM).

Eine reine HTML-Seite steht fest, sobald sie geladen ist. Dynamisches HTML heißt: Die Seite reagiert auf das, was der Benutzer tut. Sie ändert ihr Aussehen, blendet Zusatzinfos ein oder klappt ein Menü auf.

Was der Benutzer tut, heißt Event (Ereignis): ein Klick, ein Tastendruck, die Maus über einem Element. So fühlt sich eine Webseite an wie ein Programm auf dem eigenen Rechner. Im Extremfall besteht eine ganze Anwendung aus einer einzigen Seite, die sich immer wieder umbaut (Single-Page-Application).

Dafür braucht der Browser ein Modell der Seite, über das ein Programm ihre Teile zur Laufzeit erreicht. Dieses Modell heißt DOM.

Was das DOM ist

Definition · Document Object Model (Folien 3 und 6)

Standard des W3-Konsortiums. Die (X)HTML-Seite wird als Baum, bestehend aus Knoten, interpretiert. Unterstützt Zugriff auf und Manipulation von Inhalt, Struktur und Style. Ermöglicht Reaktion auf Events (z. B. MouseEvent: click, mouseover; KeyboardEvent: keydown, keyup).

DOM steht für Document Object Model, auf Deutsch etwa „Objektmodell des Dokuments“. Es ist ein Standard des W3C (World Wide Web Consortium, das Gremium, das die Regeln des Webs festlegt).

Das DOM sieht die Seite als Baum. Jedes Stück der Seite ist ein Knoten (englisch node) in diesem Baum. Ein Knoten kann Kinder haben, die unter ihm hängen. Wer einen Knoten im Baum findet, kann seinen Inhalt lesen und ändern.

Am häufigsten ändert JavaScript im Browser den Baum, meist als Reaktion auf ein Event. Das DOM gibt es aber in fast allen Programmiersprachen, etwa Java, PHP oder Python. Damit kann man auch auf dem Server Dokumente aus HTML oder XML erzeugen und bearbeiten (Folie 14).

Merke: DOM = die (X)HTML-Seite als Baum aus Knoten; (X)HTML ist die Auszeichnungssprache der Seite. Über den Baum greift ein Programm auf Inhalt, Struktur und Style (Aussehen, per CSS) zu und reagiert auf Events.
Noch 9 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Die Idee

warum es das DOM gibt

Benutzer klickt, tippt oder fährt mit der Maus über die Seiteein Event (Ereignis), z. B. click, keydown
JavaScript im Browser reagiert
DOM: die Seite als Baum aus KnotenZugriff auf Inhalt · Struktur · Style
Die Seite ändert sich, ohne neu zu ladenText ändern, Infos einblenden, Menü aufklappen
Legendegerade gemeintEine HTML-Seite als Baum aus Knoten.