Einführung in das DOM - Document Object Model

Wir benötigen für ein schickes JavaScript-Programm HTML- und CSS-Kenntnisse. Über HTML und CSS erstellt man nun die Oberfläche und mit JavaScript kann man Inhalte in der HTML-Ausgabe erweitern bzw. austauschen. Genauso kann man mit JavaScript auf eine Nutzung der Maus bzw. der Tastatur reagieren.

Im ersten Schritt für die Beeinflussung der HTML-Ausgabe schauen wir uns das DOM an. DOM steht für das Document Object Model. Das DOM steht uns in jedem Browser zur Verfügung, der uns eine HTML-Seite anzeigt.

Vom Browser werden uns im Rahmen des DOM zwei wichtige Variablen bereitgestellt:

• document
• window

Über diese zwei Objekte stehen uns wieder zahlreiche Methoden und Eigenschaft zur Verfügung.

Console zur Anzeige der Möglichkeiten von document/window anzeigen

Gibt man nun in der Konsole die Anweisung console.log(window); bzw. console.log(document); an, sehen wir eine große Anzahl an Informationen, auf die wir über diese Methoden zugreifen können bzw. diese auch später beeinflussen können.

So kann Beispielsweise die Fensterbreite des Browsers ausgeben lassen über:

window.innerWidth

HTML-Baum und Zugriff über DOM darauf

Auf den Baum können wir über die Kindelemente (über children) auf jedes Element zugreifen. Dies macht aber nicht wirklich Spaß und daher gibt es deutlich komfortablere Möglichkeiten über z.B.

• document.getElementById("id")
• document.getElementsByClassName("farbe1")
• document.getElementsByTagName("h2")

Dies schauen wir uns im folgenden Kapitel an.