217
Teil C
JavaScript in das
Design integrieren
In diesem Teil:
Kapitel 10 Das Dokumentobjektmodell 219
Kapitel 11 JavaScript-Ereignisse und der Browser 237
Kapitel 12 Cookies erzeugen und verarbeiten 253
Kapitel 13 Arbeiten mit Bildern in JavaScript 267
Kapitel 14 JavaScript mit Webformularen verwenden 287
Kapitel 15 JavaScript und CSS 307
Kapitel 16 JavaScript-Fehlerbehandlung 321
219
Kapitel 10
Das Dokumentobjektmodell
In diesem Kapitel:
Definition des Dokumentobjektmodells 220
Elemente abrufen 223
Mit Attributen arbeiten 229
Elemente erstellen 233
Elemente löschen 234
Übungen 236
220
Kapitel 10: Das Dokumentobjektmodell
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
mithilfe des Dokumentobjektmodells (DOM) Elemente aus einem Dokument abzurufen
neue Elemente in einem Dokument zu erzeugen
Elemente in einem Dokument zu ändern
Elemente aus einem Dokument zu entfernen
Definition des Dokumentobjektmodells
Das Dokumentobjektmodell (Document Object Model, DOM) bietet eine Möglichkeit, auf die Inhalte von
HTML-Dokumenten zuzugreifen und sie zu ändern. Das DOM ist ein Standard, der vom W3C (World
Wide Web Consortium) definiert wurde. Die meisten Internet-Browser implementieren das DOM in
verschiedenen Formen – und mit wechselndem Erfolg.
Wie viele andere – insbesondere auf die Webprogrammierung bezogene – Standards hat sich das DOM im
Verlauf mehrerer Jahre entwickelt. Es umfasst drei Spezifikationen, die im Sprachgebrauch des DOM als
Levels (Ebenen, Versionen) bezeichnet werden, wobei eine vierte Spezifikation auf dem Weg ist.
Das DOM ist wesentlich leistungsfähiger, als es dieses Kapitel oder selbst das gesamte Buch vermitteln kann,
und es gibt weit mehr zu sagen, als hier zur Sprache kommt. So ist das DOM nicht auf die JavaScript-
Programmierung beschränkt. Dieses Buch konzentriert sich natürlich darauf, wie Sie mithilfe von JavaScript
auf das DOM zugreifen und es manipulieren können.
Wenn ich in diesem Kapitel (und an anderen Stellen im Buch) auf das DOM verweise, geht es vor allem
darum, wie es sich zur aktuellen Aufgabe verhält und nicht zu den breiter gefassten, relevanten Konzepten
oder zu anderen Möglichkeiten, die das DOM bietet. Zum Beispiel beschäftigt sich das Buch vorrangig
damit, wie das DOM die HTML-Dokumente als Baumstrukturen darstellt. Das DOM realisiert dies glei-
chermaßen für HTML als auch XML (Extensible Markup Language), doch da das Thema dieses Buchs
JavaScript ist, steht im Vordergrund, dass Sie die Beziehung des DOM zu HTML verstehen.
Weitere Informationen über das DOM finden Sie in seiner Spezifikation auf der W3C-Site http://www.w3.org/
DOM/.
HINWEIS
Die Beispiele in diesem Kapitel verwenden die Inline-Ereignishandler. Zum Beispiel ist das onload-Ereignis dem
<body>-Tag direkt zugeordnet und der onclick-Ereignishandler ist mit verschiedenen HTML-Tags verbunden. Die Verwendung
von Inline-Ereignishandlern wird aber nicht empfohlen und geschieht hier nur zu Demonstrationszwecken. Kapitel 11 stellt ein
besseres Verfahren vor, um Ereignisse mit HTML zu verbinden. DOM Level 0 wird auch als Legacy DOM bezeichnet.
DOM Level 0: Das Legacy DOM
DOM Level 0 wurde vor anderen formalen Spezifikationen des DOM implementiert. Nachdem DOM Level
1 spezifiziert war, wurde die vorherige Technologie, die sich auf das Skripting von Dokumenten bezog, als
Legacy DOM Level 0 (wenn auch nicht wirklich formal durch irgendein Standardgremium) eingeordnet.
Heute unterstützt jeder große Browser die Komponenten von DOM Level 0 aus Gründen der Abwärtskom-
patibilität. Immerhin sollen nicht alle Skripts, die Sie 1998 geschrieben haben, zum Absturz führen!
Get JavaScript - Schritt für Schritt 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.
