Document Object Model

Das dynamische Ändern einer Website ist das Markenzeichen der neuesten Generation JavaScript gestützter Websiten. Zum Beispiel, bietet Google Maps die Möglichkeit einer interaktiven Weltkarte. Diese kann man vergrößern/verkleinern usw., ohne dass einen neue Website geladen wird. JavaScript verändert hier das HTML, das der Webbrowser ursprünglich heruntergeladen hat.

Immer wenn man den Inhalt, oder das HTML einer Website ändert, führt man im Wesentlichen zwei Schritte aus:

1. Element auf der Seite identifizieren: bevor man etwas mit dem Element tun kann, muss man es identifizieren.
2. Etwas mit dem Element tun: hier gibt es eine ganze Menge von Möglichkeiten z.B.

• Eigenschaften eines Elements ändern
• Neue Inhalte einfügen
• Elemente entfernen
• Informationen aus Elementen extrahieren

Das Document Object Model

Der Webbrowser merkt sich ein Modell des HTML einer Seite. Er merkt sich die HTML-Tags, ihre Attribute und die Reihenfolge, in der sie in der Datei vorkommen. Diese Abbildung der Seite wird Document Object Model, oder kurz gesagt, DOM genannt. Das DOM entählt die Informationen, die JavaScript benötigt, um mit Eigenschaften zu kommunizieren. Es bietet außerdem die nötigen Werkzeuge, um durch das HTML einer Seite zu navigieren, es zu ändern und zu erweitern. Es ist jedoch kein JS, sondern ein Standard des W3C.

Um zu verstehen, wie es funktioniert:

und hierzu sieht das DOM so aus:

Das DOM behandelt jedes Tag (auch Elemente genannt), Attribute und Texte als einzelne Einheiten namens Knoten.

Seitenelemente auswählen

Damit JS die Inhalte einer Seite manipulieren kann, braucht man zum Auswählen von Knoten diese Methoden:

• getElementById()
• getElementsByTagName()

getElementById()

Ein Element anhand der ID abzurufen, heißt, einen einzelnen Knoten zu lokalisieren, dem eine eindeutige ID zugewiesen wurde.

Dieser Code wählt den Knoten mit der ID ueberschrift aus:

document.getElementById(‚ueberschrift‘)

Das heißt so viel wie, Durchsuche die Seite nach einem Tag mit der ID ‚ueberschrift‘. Der document-Teil, ist ein Schlüsselwort, das sich auf das gesamte Dokument bezieht.

var ueberSchrift = document.getElementById(‚ueberschrift‘)

Der Befehl getElementById() gibt eine Referenz auf einen einzelnen Knoten zurück, der in diesem Beispiel in der Variablen uberSchrift gespeichert wird und dies ist unheimlich praktisch bei dieser Methode.

getElementsByTagName()

Das verwendet man, wenn man mehr als nur ein einzelnes Element zurückgeben möchte, also so etwas wie eine Liste. Diese Methode funktioniert ähnlich wie getElementById() , aber statt des Werts einer ID gibt man den Namen des Tags an, nach dem man sucht.

var links = document.getElementsByTagName(‚a‘);

Das entspricht der Aussage : Durchsuche dieses Dokument nach allen <a>-Tags und speicher das Ergebnis in der Variable links. Die Methode gibt eine ganze Liste mit Knoten zurück, welche sich sehr ähnlich, wie Arrays (Index, length, for-Schleife).

Man kann auch getElementById() und getElementsByTagName() zusammen verwenden.

Angrenzende Knoten wählen

Wenn man z.B. ein <h1>-Tag mit den geraden genannten Methoden wählt, erhält man nur das Tag und nicht den darin enthaltenen Text. Hier muss man dann leider beim h1-Knoten anfangen, sich dann zum Textknoten weiterhangeln und schließlich den Wert des Textknotens abrufen.

Das Nachkommens-Tag

Mit einem Nachkommens-Selektor (CSS) kann man ein bestimmtes Tag anhand seiner Beziehung zu einem anderen Tag formatieren. Wenn sich ein Tag innerhalb eines anderen Tags befindet, nennt man es ein Nachkommen-Tag. Tags die andere Tags verpacken, nennt man Vorfahren.

Das DOM kann auf einen Elternknoten, Kindknoten, oder auf einen Geschwisterknoten zugreifen. Dafür bietet es einige Methoden:

• .childNodes ist die Eigenschaft eines Knotens, die eine Liste aller direkten Kindknoten dieses Knotens enthält. Diese Liste funktioniert genauso wie die Liste, die von der getElementsByTagName() zurückgeliefert wird. Das erste Kind innerhalb einer Liste ist (z.B.) kinder[0]. Auf den Text eines Textknotens greift man zu, indem man die nodeValue-Eigenschaft abfragt.
• .parentNode ist eine Knoteneigenschaft, die den direkten Elternknoten eines bestimmten Knotens repräsentiert.
• .nextSibling und .previousSibling sind Eigenschaften, die auf den Knoten verweisen, der direkt vor, oder nach dem aktuellen Knoten kommt. Wenn man versucht auf einen Geschwisterknoten zuzugreifen, der nicht existiert, liefert JS den Wert null zurück (so kann man prüfen, ob ein Knoten einen previousSibling hat).

Den Inhalt einer Seite hinzufügen

Mit DOM wäre bzw. ist das ganz schön viel Arbeit… Aber zum Glück gibt es eine einfachere Methode: die innerHTML Eigenschaft. Diese ist nicht Standardbestandteil des DOM. Im Grunde repräsentiert innerHTML das gesamte HTML innerhalb eines Knotens.

So greift man mit JS (apropos, JS ist die Abkürzung für JavaScript) auf das HTML zu:

Hier repräsentiert die Variable dasP den Knoten für den ersten Absatz auf der Site. Die letzte Codezeile öffnet ein alert-Fenster, das den gesamten Code innerhalb eines Tags anzeigt.

Mit innerHTML kann man auch den Inhalt eines Knotens ändern, indem man die innerHTML-Eigenschaft festlegt:

Hier wird der Inhalt des Tags mit der ID ueberschrift in ‚Hier war JavaScript am Werk!‘ geändert.

Man kann jedoch auch die innerHTML-Eigenschaft mit kompletten HTML-Blöcken belegen.

ergebnisBereich.innerHTML = meldung;

Dies weist den Inhalt der Variablen meldung der innerHTML-Eigenschaft des <p>-Tags zu. Sie schreibt also die Meldung in diesen Absatz, genau wie mit dem document.write()-Befehl. Der Ansatz mit innerHTML ist aber einfacher, da man keinen zweiten Block mit JS-Code in den Body der Seite einfügen muss.

Die Problematik mit DOM

Es ist zwar ein sehr hilfreiches Werkzeug, aber es hat auch einige Schwächen bzw. Dinge, die leichter oder besser gemacht werden könnten. Zum einen ist es eher zeitaufwändig sich im DOM von Knoten zu Knoten zu bewegen. Darüber hinaus existiert das Problem, dass die wichtigsten Browser das DOM unterschiedlich interpretieren. Außerdem behandeln die verschiedenen Browser Whitespace unterschiedlich.