Sie sind hier � 235
Interaktion mit der Webseite
document steht immer ganz oben.
Es ist ein besonderer Teil des
Baums, mit dessen Hilfe Sie in
JavaScript auf das gesamte DOM
zugreifen können.
Die Elemente stehen für
die Zweige des Baums.
Diese Elemente stehen für die
Blätter des Baums (da sie keine
weiteren Elemente, sondern nur
Text enthalten).
document
head
title script
body
h1
meta div id=”entry1”
h2 p p
document ist außerdem die Wurzel
des umgekehrten Baums.
Mein Blog
Heute: Vogel-
beobach-
tung
Heute
sah ich
drei ...
Hier
ein paar
Fotos ...
Das DOM enthält die Elemente der Seite und deren
Inhalt. (Der Textinhalt ist da auch, wenn wir ihn bei der
Darstellung des DOM nicht mit anzeigen.)
Mein Blog
html
Ein erster Eindruck vom DOM
Wenn Sie dem Rezept zum Erstellen eines DOM folgen, erhalten Sie eine
Struktur wie die unten gezeigte. Jedes DOM beginnt mit einem document-
Objekt, gefolgt von einem »Baum« mit Zweigen und Blättern (den »nodes« oder
»Knoten«) für jedes HTML-Element. Das sehen wir uns mal genauer an:
Und dieses DOM können
wir jetzt beliebig
untersuchen und
verändern.
Wir vergleichen diese
Struktur mit einem Baum,
weil ein »Baum« in der
Informatik für eine bestimmte
Datenstruktur steht und
weil diese tatsächlich wie ein
umgekehrter Baum aussieht.
236 Kapitel 6
Übung zur Erstellung eines DOM
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Filme</title>
</head>
<body>
<h1>Vorstellungen</h1>
<h2 id="film1">Plan 9 aus dem Weltall</h2>
<p>Vorstellungen um 15:00h, 19:00h.
<span>
Sondervorstellung um <em>Mitternacht</em>!
</span>
</p>
<h2 id="film2">Alarm im Weltall</h2>
<p>Vorstellungen um 17:00h, 21:00h.</p>
</body>
</html>
Tun Sie so, als seien Sie
der Browser. Sie müssen
den HTML-Code parsen und
daraus Ihr eigenes DOM
erstellen. Nehmen Sie die
rechts stehende HTML-Seite
und zeichnen Sie Ihr DOM
unten auf. Den Anfang haben
wir schon für Sie gemacht.
SPIELEN Sie Browser
Zeichnen Sie hier Ihr DOM.
document
html
Vergleichen Sie Ihre Antwort
mit unserer Lösung am Ende des
Kapitels, bevor Sie weiterlesen.
Sie sind hier � 237
Interaktion mit der Webseite
Oder: Wie zwei völlig verschiedene Technologien
zueinander gefunden haben
HTML und JavaScript stammen mit Sicherheit von
unterschiedlichen Planeten. Der Beweis? Die DNS von
HTML besteht aus deklarativem Markup zum Beschreiben
einer Reihe verschachtelter Elemente, aus denen Ihre
Seite besteht. Die Gene von JavaScript sind dagegen
Algorithmen für die Beschreibung von Berechnungen.
Sind die beiden so unterschiedlich, dass sie nicht
miteinander kommunizieren können? Sicherlich nicht,
denn sie haben etwas gemeinsam: das DOM. So kann
JavaScript auf verschiedenen Wegen mit der Seite
kommunizieren und umgekehrt. Im Moment wollen
wir uns aber nur auf eine Methode beschränken. Es
ist eine Art Wurmloch, über das JavaScript auf jedes
Element Ihrer Seite zugreifen kann. Das Wurmloch heißt
getElementById.
238 Kapitel 6
Mit getElementById auf ein Element zugreifen
Beginnen wir mit einem einfachen DOM. Es enthält ein paar HTML-Absätze, jeweils mit einer ID,
die sie als grüner, roter oder blauer Planet kennzeichnen. Außerdem enthalten die Absätze jeweils
etwas Text. Und natürlich gibt es auch ein <head>-Element. Um die Sache zu vereinfachen, haben
wir hier ein paar Details weggelassen.
Jetzt wollen wir die Sache mit JavaScript ein wenig aufpeppen. Der Text von gruener_
planet soll von »Alles in Ordnung« zu »Roter Alarm: vom Phaser getroffen!« geändert werden.
Später machen Sie so etwas möglicherweise aufgrund bestimmter Benutzeraktionen oder
sogar anhand von Daten aus einem Webservice. Im Augenblick reicht es aber, den Text
von »gruener_planet« zu aktualisieren. Dafür brauchen wir zunächst das Element mit der
entsprechenden ID. Hier der nötige Code:
document.getElementById("gruener_planet");
Hier bitten wir document, uns ein
Element mit einer bestimmten ID
zurückzugeben.
Das document-Objekt steht für die
Seite in Ihrem Browser und enthält
das komplette DOM. Wir können es also
anweisen, bestimmte Dinge für uns zu
tun, zum Beispiel das Element mit einer
bestimmten ID zu finden.
p
getElementById(“gruener_planet”) gibt den
Absatz mit der ID »gruener_planet« zurück …
… dann kann der
JavaScript-Code
alle möglichen
interessanten
Dinge damit
anstellen.
body
p id ="gruener_planet" p id ="roter_planet" p id ="blauer_planet"
Alles in
Ordnung
Nichts zu
berichten
Alle Systeme
OK
head
html
document
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
