5.4 Anwendungsbeispiele
Nun wissen wir, wie DOM-Bäume funktionieren und inwieweit diese mit der Programmierung zusammenhängen. Wir haben Methoden und Eigenschaften kennengelernt, mit denen wir arbeiten können. Wie wir damit arbeiten, erfahren wir in diesem Kapitel.
Hinweis
Wir verwenden in den kommenden Beispielen CSS und JavaScript, auch wenn dies erst später behandelt wird. Die Beispiele sollen die Funktionsweise von DOM aufzeigen, und wir hoffen, dass auch ohne das Wissen um CSS und JavaScript die Grundprinzipien verstanden werden.
CSS-Eigenschaften von HTML-Tags ändern
DOM-Methoden und -Eigenschaften steuern Ereignisse oder manipulieren eine Stelle des Dokumentes. Dadurch muss das Dokument, wenn es bereits geöffnet wurde, nicht neu geladen werden.
Mit einem einfachen Skript können wir auch die CSS-Eigenschaften von HTML-Elementen verändern. Dazu erstellen wir zunächst ein HTML-Dokument, das das Element enthält, das verändert werden soll. Des Weiteren enthält es noch einen Button, der das Ereignis der Änderung auslösen soll.
Beispiel: Änderung von CSS-Eigenschaften (HTML-Dokument)
Hier der komplette HTML-Code, der das Beispiel zeigt:
Funktionsweise
-
Zeile 19: Im
<input>
-Element gibt es eine JavaScript-Methodeonclick
, die beim Klick auf den Button die JavaScript-FunktioncssChange
aufruft. -
In der JavaScript-Funktion
cssChange
: -
Die Variable
var change
sucht im DOM-Baum des HTML-Dokuments das Element mit derid="change"
und speichert es. -
Ebenso wird die Variable
var button
dem<input>
-Element aus Zeilen 19 + 20 zugewiesen. -
Beide Variablen enthalten die entsprechenden DOM-Elemente und können HTML-Attribute auslesen. Dies wird in der
if
-Bedingung verwendet: -
change.style.fontFamily
verweist auf die CSS-Eigenschaftfont-family
des<p>
-Elements. Beim ersten Aufruf ist diesserif
. -
Wenn die Bedingung erfüllt ist, wird
change.style.fontFamily
der Wertsans-serif
zugewiesen.- Dieser Wert wird direkt über DOM an das
<p>
-Element übergeben.
- Dieser Wert wird direkt über DOM an das
-
In der Zeile
button.value
wird der Text des Buttons dynamisch geändert.
Übungsaufgabe
Wenn das oben angeführte Beispiel für uns neu oder noch etwas ungewohnt ist, dann probieren wir die folgende Aufgabe: Nehmen wir den Sourcecode und wandeln wir diesen so ab, dass die Überschrift geändert wird.
Eine Liste erstellen und erweitern
Das folgende Beispiel zeigt, wie Elemente zur aktuellen Seite hinzugefügt werden können. Dafür haben wir zunächst ein normales HTML-Dokument, in dem eine Liste vorkommt. Wie wir sehen, hat diese Liste bisher nur ein Element.
Beispiel: HTML-Body mit nur einem Listeneintrag
Funktionsweise
-
In der Funktion
window.onload
wird die leere Liste ausgelesen und die Daten mitcreateElement
erstellt. -
Anschließend werden die neuen Elemente mit
appendChild
immer aneinander gehängt (a
wird anli
gehängt undli
an die Liste). -
Die fertige Liste sieht dann so aus:
-
Facebook
-
XING
-
Linkedin
-
Researchgate
-
Wichtiger Hinweis
Natürlich macht es wenig Sinn, die zusätzlichen Links fest in einem JavaScript-Array zu definieren. Später lernen wir, wie man mittels JavaScript (und Ajax) die Daten von einem Webserver dynamisch einfügen kann, ohne dass die Webseite neu geladen werden muss.