Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Was ist DOM-Scripting?

JavaScript galt in der Webszene lange als störende Spielerei. In den letzten Jahren macht die Programmiersprache mit nützlichen Anwendungen aber langsam wieder Boden gut. Gerrit van Aaken zeigt wie sich mit Hilfe von JavaScript und dem Document Object Model Webseiten dynamisch verändern lassen.

DOM-Scripting ist derzeit wohl eines der heißesten Themen in der Webdesign-Welt. Der Begriff wurde erst in den letzten Monaten durch zahlreiche Blogartikel und mehrere Fachbücher populär. Fast ist man versucht zu glauben, hier wäre eine neue revolutionäre Programmiersprache geboren worden, doch das ist nicht der Fall; eine mögliche Kurzdefinition lautet nämlich wie folgt:

DOM-Scripting benennt die Technik, mit der man dynamisch im Browser eine Webseite verändert. Mittels Javascript greift man dabei auf das DOM (Document Object Model) zu.

Zurecht fragt man sich, was daran neu sein soll – schließlich gibt es JavaScript schon seit über 10 Jahren, und auch das Document Object Model ist in allen üblichen Browsern seit geraumer Zeit implementiert. Nun, neu ist in der Tat nicht die technische Möglichkeit, sondern vielmehr die Absicht und auch die Haltung, mit der man als Webdesigner vorgeht – dazu gleich mehr. Doch zunächst ein paar Grundlagen:

Was kann JavaScript sonst noch?

DOM-Scripting ist als Teilbereich von JavaScript anzusehen. Mit JavaScript, beziehungsweise der zugrunde liegenden Syntax ECMAScript, lassen sich alle Dinge erledigen, die man als Programmierer von jeder Scriptsprache erwartet, doch in zwei Bereichen tritt die spezielle Ausrichtung auf das Web zu Tage: Das Browser Object Model (BOM) und das Document Object Model (DOM).

Im BOM sind alle Eigenschaften und Zustände enthalten, die speziell die Browserumgebung betreffen, also Fenstergröße, Scrollingverhalten, Statusleiste, Vor- und Zurück-Buttons usw. Per JavaScript kann man diese Objekte nun analysieren und auch manipulieren, was in der Vergangenheit von übereifrigen Webdesignern leider zu exzessiv betrieben wurde: PopUp-Fenster, die sich von alleine auf die maximale Größe skalieren und die Sperrung von essentiellen Browserfunktionen wie dem rechten Mausklick waren keine Seltenheit und haben letztlich einen herben Imageverlust für die gesamte JavaScript-Sprache bewirkt, von dem sie sich bis heute nicht vollständig erholt hat.

Erst seit drei bis vier Jahren erkennen immer mehr Entwickler, dass man auch extrem nützliche und dazu noch unaufdringliche Dinge mit JavaScript anstellen kann. Und fast immer spielt hierbei nicht das BOM, sondern das DOM die Hauptrolle.

Wissenswertes zum DOM

Wenn der Browser vom Server ein HTML-Dokument geliefert bekommt, ist dieses zunächst eine simple, lineare Textdatei mit einigen Strukturelementen. Doch damit kann der Browser zunächst nicht viel anfangen. Deshalb zerteilt er das Dokument in kleinste Einheiten (= Objekte) und legt sie in hierarchisch verästelter Anordnung in seinem Speicher ab. Die Gesamtheit dieser Struktur nennt man den DOM-Baum, die einzelnen Elemente sind die Knoten (Nodes).

Alle Veränderungen, die wir nun mit JavaScript nachträglich am DOM-Baum vornehmen, sind folgerichtig als DOM-Scripting zu bezeichnen. Dabei stets wichtig zu wissen: Der DOM-Baum existiert nur im Speicher des Browsers! Beim Skripten verändert sich nicht etwa das zugrunde liegende HTML-Dokument, sondern nur das interne Modell, welches sich der Browser temporär von der HTML-Struktur zurecht gelegt hat.

Die Anzeige der Webseite im Browserfenster synchronisiert übrigens ständig mit dem aktuellen DOM-Baum aus dem Speicher – alle Änderungen dort werden also sofort sichtbar. Das gilt nicht nur für die Ausgabe auf dem Bildschirm, sondern inzwischen auch für moderne Vorlese-Software, die blinden und sehbehinderten Surfern bei der Erfassung von Webinhalten helfen.

DOM-Scripting in Aktion

Kommen wir zum praktischen Teil: Wie ist so eine DOM-Manipulation aufgebaut? Zunächst müssen wir den Ort bestimmen, an dem sich der eigentliche JavaScript-Code befinden soll. Früher schrieb man die Funktionen einfach an die Stelle, an der sie gebraucht wurden, mitten in das HTML-Dokument. Heute ist man dazu übergegangen, die Skripte zentral und am besten in einer externen .js-Datei zu lagern. Daraufhin definiert man über HTML-Klassen und IDs die Stellen, an denen man Manipulationen durchführen möchte. Somit kann ein und das selbe Script für unterschiedliche HTML-Seiten verwendet werden.

Üblicherweise spielen sich bei einer DOM-Manipulation im Code folgende drei Schritte ab:

1. Analyse des aktuellen DOM-Baums und Herauspicken der gewünschten Stelle, mit der etwas passieren soll.
2. Interne Vorbereitung der Manipulation.
3. Durchführen der Manipulation an der bei 1) definierten Stelle mit den bei 2) vorbereiteten Daten.

Ein Beispiel

Will man diese drei Schritte in ein simples Beispiel gießen, so könnte das folgendermaßen aussehen: Wir möchten, dass der Anfang des Liedes "O du fröhliche" per DOM-Scripting vervollständigt wird.

Dies ist unser ursprüngliches HTML:

<p>Ein toller Absatz.</p>
<p id="weihnachtslied">O du fröhliche!</p>
<p>Ein weiterer Absatz</p>


Dabei trägt der mittlere Absatz das Attribut id="weihnachtslied".

Und hier kommen unsere drei Schritte zum Weihnachtsglück:

var liedanfang = document.getElementById("weihnachtslied").childNodes[0]; //Schritt 1
var lied_erweitert = liedanfang.nodeValue + " O du selige!"; //Schritt 2
liedanfang.nodeValue = lied_erweitert; //Schritt 3


• Schritt 1: Wir wählen per ID den richtigen Absatz aus und springen auf das erste Kindelement, nämlich den Textinhalt des Absatzes.
• Schritt 2: Wir kreieren eine neue Zeichenkette und hängen darin den zweiten Teil des Liedes an den ersten dran.
• Schritt 3: Nun tauschen wir die ursprüngliche Zeichenkette mit der neuen, vollständigen Zeichenkette aus. Fertig!

Beispiel live ausprobieren

Dieses Beispiel demonstriert nur das Grundprinzip einer sauber von außen durchgeführten DOM-Manipulation. Die drei Schritte im JavaScript-Code könnten beispielsweise ablaufen, nachdem der Anwender einen bestimmten Button gedrückt hat.

Ein weniger weihnachtliches, dafür komplexeres Anwendungsbeispiel für DOM-Manipulationen wäre ein Skript, das eine ungeordnete Liste in einem Dokument nachträglich alphabetisch sortiert. Oder auch eine Funktion, die alle vorhandenen Überschriften in einem Text aufspürt, daraus eine Inhaltsangabe generiert und diese am Anfang des Dokuments einfügt.

Helfer fürs DOM-Scripting

Es gibt ein kleines Problem, wenn man komplexere Dinge per DOM-Scripting erledigen möchte, als nur Weihnachtslieder zu ergänzen: Es gibt viel zu wenig eingebaute, DOM-spezifische Funktionen und Methoden. So fehlt beispielsweise eine Methode namens "getElementsByClassName()", mit der man über die Klassen-Namen auf mehrere definierte HTML-Elementen zugreifen könnte.

Glücklicherweise kann man sich mit selbst geschriebenen Funktionen behelfen, die eben genau das machen, was beim DOM-Scripting häufig benötigt, aber nicht mit den Standardbefehlen durchgeführt werden kann. Und weil das heutzutage so gefragt ist, findet man im Internet einige vorgefertigte Funktionssammlungen (Bibliotheken/Frameworks). Sie erleichtern den DOM-Scripting-Alltag enorm. Am bekanntesten dürfte dabei prototype sein, doch auch Newcomer jQuery erfreut sich schnell wachsender Beliebtheit.

Kleiner DOM-Scripting-Knigge

Wie zu Beginn schon angedeutet, ist mit DOM-Scripting immer auch ein bisschen Philosophie verbunden, denn ohne die fordert fast jede Technik zum Missbrauch auf. Dabei ist es wichtig, zwischen eher informativen Websites und eher interaktiven Webapplikationen zu unterscheiden, auch wenn die Grenzen bisweilen fließend sind.

Auf klassischen Websites mit eher statischem Charakter sollte man sich nicht auf DOM-Scripting verlassen, vor allem müssen alle relevanten Inhalte auch ohne JavaScript zugänglich gemacht werden! Gerade was den Einsatz von DOM-Manipulationen per AJAX angeht, ist Vorsicht geboten: Wenn wichtige Inhalte erst später in eine Website nachgeladen werden, guckt jeder User in die Röhre, der kein JavaScript auf seinem Endgerät aktiviert hat – aus welchen Gründen auch immer.

Etwas lockerer kann man die Sache bei hochdynamischen Webapplikationen und in Administrationsbereichen angehen – hier erwartet man vom Nutzer einen höheren technischen Standard und kann durchaus auf komplexere DOM-Manipulationen setzen – gerne auch mit AJAX.

Generell darf man aber auch die anderen Web-Techniken nicht vergessen: HTML-Elemente sollten daher nicht per JavaScript direkt umgestylt werden. Statt dessen vergibt man ihnen besser zusätzliche Klassen und kann diese dann wiederum in der CSS-Datei aufgreifen und nach Wunsch stylen.

Wer diese Punkte beherzigt, kann sich prinzipiell sofort an die Arbeit machen und viele Webdesign-Herausforderungen effizienter und moderner lösen als man es sich vor einigen Jahren noch vorstellen konnte. Viel Spaß dabei!

Weiterführende Links

• DOMscripting – das Buch von Jeremy Keith .
• Der sinnvolle Einsatz von JavaScript (SELFHTML aktuell Weblog) .
• From DHTML to DOM scripting (Chris Heilmann) .