Das Dokument-Objekt-Modell (DOM)

Bei den bisherigen Grundlagen kam noch gar nicht zur Geltung, dass JavaScript eine Webprogrammiersprache ist und sehr stark auf die Zusammenarbeit mit HTML ausgerichtet ist. Das sogenannte Dokument-Objekt-Modell (DOM) erklärt, wie das HTML-Dokument in JavaScript repräsentiert wird. Jedem HTML-Element entspricht nämlich ein JavaScript-Objekt. So wie die verschiedenen HTML-Elemente durch Verschachtelung mit einander in Beziehung stehen, können die JavaScript-Objekte dann in einer dazu passenden Struktur angeordnet werden, vergleichbar mit einem Stammbaum. Deshalb spricht man bei Elementen, die in andern Elementen enthalten sind, auch oft deren Kindelementen (engl. child) und umgekehrt handelt es sich dann bei den sie enthaltenden Elementen um die Elternelemente (engl. parent). Stellt man sich das HTML-Dokument nun als so eine Art Stammbaum mit den einzelnen Elementen vor, so ist die Bezeichnung der Elemente als Knotenpunkte (engl. node) naheliegend, da in ihnen die Verbindungslinien zusammenfließen. Diese Bemerkungen machen es leichter, später mit den JavaScript-Funktionen zurecht zu kommen, welche für die Interaktion mit dem HTML-Dokument gedacht sind.

Das JavaScript-Objekt, welches das ganze Dokument repräsentiert, heißt einfach document. Dies ist das Objekt, welches uns am häufigsten im Zusammenhang mit der Arbeit am HTML-Dokument begegnet. Möchte man nun ein spezielles Element aus dem HTML-Dokument herausgreifen, so steht uns dafür eine vordefinierte Funktion zur Verfügung, sofern wir dem Element im HTML-Code eine id zugeordnet haben.

<body>
<p id="hauptabsatz">...</p>
<script>
var absatz = document.getElementById("hauptabsatz");
</script>
</body>

In diesem Beispiel bekommt die JavaScript-Variable absatz das Objekt zugewiesen, welches das HTML-Element mit hauptabsatz als id-Wert repräsentiert. Da das id-Attribut im ganzen HTML-Dokument eindeutig sein muss, kann es hier nicht zu Verwechslungen kommen.

Eine ähnliche Funktion gibt uns die Möglichkeit, nach HTML-Elementen mit einem bestimmten Tagnamen zu suchen. Da dieser nicht eindeutig ist, wird nicht genau ein Elementobjekt zurückgegeben, sondern das Ergebnis ist eine Sammlung von Elementobjekten. Obwohl es sich dabei nicht um ein Array handelt, wird auf dieselbe Art auf ein einzelnes Element daraus zugegriffen, nämlich mit einem Index zwischen eckigen Klammern:

<body>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<script>
var absatz3 = document.getElementsByTagName("p")[2];
</script>
</body>

In diesem Codebeispiel wird der Variablen das Elementobjekt zugewiesen, das den dritten Absatz repräsentiert. Beachte hier wieder (wie auch bei Arrays), dass die Zählung bei 0 beginnt.

Aufgabe

Schreibe ein JavaScript-Programm, das die Anzahl der h1-Elemente im Dokument ermittelt.