Websiteentwicklung: JavaScript: Objekte: Document

Allgemeines

Das Document-Objekt erlaubt es JavaScript, logischen Zugriff auf die Repräsentation aller Elemente eines Dokumentes im interpretierenden Programm zu nehmen und diese Repräsentation bei Bedarf beliebig zu verändern. Unter einem Document ist in diesem Zusammenhang die Repräsentation eines jeden Dokumentes zu verstehen, das in einem Programm geladen wird, welches solche Skripte interpretiert.

Das Document-Objekt ist ein Bestandteil des Window-Objekts. Infolgedessen kann JavaScript auf das Document-Objekt auch über die window.document-Eigenschaft zugreifen.

Document-Objekt und DOM

Wie das Document-Objekt aufgebaut ist und funktioniert, lässt sich am besten verstehen, wenn man wenigstens ansatzweise mit dem Konzept des Dokument-Objekt-Modells (DOM, englisch: Document Object Model) vertraut ist.

Was ist das DOM?

Das DOM ist eine Schnittstelle, über die per Programm auf die Repräsentation von (X)HTML- und XML-Dokumenten innerhalb eines (Darstellungs-)Programmes zugegriffen werden kann, nicht also auf den Inhalt solcher Dokumente selbst. Von daher kann das DOM auch als Vorschlag für ein Modell aufgefaßt werden, wie Dokumente im (Darstellungs-)Programm repräsentiert werden können. DOM wurde durch das W3C spezifiziert und beschreibt den Zugriff auf HTML- und XML-Dokumente sprachunabhängig. Das W3C beschreibt jedoch den Zugriff für die Sprachen Java und ECMA/JavaScript konkret (siehe Language Binding). Zwischen dem HTML und 'normalen' XML-Dokumenten bestehen jedoch mancherlei Unterschiede, was sich auch in der DOM-Repräsentation widerspiegelt. Ausgangspunkt des DOM ist der DOM-Kern (englisch: Core). Dazu gibt es einige Erweiterungen, insbesondere zur Ereignisbehandlung. Zudem gibt es für verschiedene Sprachformate Erweiterungen, etwa für (X)HTML und auch für SVG. Details zum DOM-Kern finden sich im Kapitel DOM-Kern.

Wie ist das DOM aufgebaut?

Grundlage des JavaScript-DOM ist eine Sammlung von Klassen. Diese Klassen (im JavaScript-Jargon: Objekte) entsprechen den Elementen von HTML- oder XML-Dokumenten (head, body, table, form, img, usw.). Ihnen sind Attribute (im JavaScript-Jargon: Eigenschaften) und Methoden zugeordnet. Da die Elemente von HTML- oder XML-Dokumenten und infolgedessen auch die JavaScript-Objekte meist hierarchisch geordnet sind, folgen nicht nur die Objekte selbst, sondern auch die Eigenschaften und Methoden dem Konzept der Vererbung.

DOM-Elemente werden als „Knoten“ (engl. node), übergeordnete Elemente als „Elternteil“ (parent) und untergeordnete Elemente als „Kinder“ (child) bezeichnet. „Kinder“ desselben „Elternteils“ sind „Geschwister“ (siblings). Ein Elternteil kann beliebig viele Kinder haben (wenn zwei Geschwister vorhanden sind, wird das erste first child, das zweite last child genannt), jedes Kind hat aber nur genau 1 Elternteil.

Weil die Struktur des DOM der eines Baumes ähnelt, werden daneben Bilder aus der Botanik verwendet: So wird die „Urmutter“ der Element-Familie, der Ausgangspunkt eines Knotenbaums, als „Wurzel“ (root) bezeichnet. Ein Knoten, der keine Kinder hat, ist ein „Blatt“ (leaf).

Beispiel

Zunächst das (X)HTML:

• <p style="color:green">Das hier ist ein beliebiger Absatz in grüner Schrift mit einem <strong>fetten</strong> Wort darin.</p>

Und hier die entsprechende DOM-Struktur:

• Wurzel (rootNode): P
  • Kinder (childNodes):
    • 'Das hier ist ein beliebiger Absatz in grüner Schrift mit einem '
    • STRONG
      • Kinder (childNodes):
        • 'fetten'
    • ' Wort darin.'
  • Attribute:
    • style = "color:green"

Objektsammlungen, Eigenschaften und Methoden

Dieser Abschnitt bietet eine lose Sammlung von Objekten, Eigenschaften und Methoden, die zumeist für (X)HTML spezifisch sind oder in dem Zusammenhang häufig verwendet werden. Eine komplette Übersicht über die nicht für (X)HTML spezifischen Strukturen mit Versionszuordnung findet sich im DOM-Kern.

Übersicht

Objektsammlungen

Eigenschaftsname	Kurzbeschreibung
anchors[]	ein Array aller Anker, die in dem Dokument enthalten sind	genauer erläutert
forms[]	ein Array aller Formulare	genauer erläutert
images[]	ein Array aller Bilder	genauer erläutert
links[]	ein Array aller Links	genauer erläutert

Eigenschaften

Eigenschaftsname	Kurzbeschreibung
cookie	liefert alle Cookies, die in dem Dokument enthalten sind	genauer erläutert
documentMode	liefert den Modus, den der Browser benutzt, um das Dokument darzustellen	genauer erläutert
domain	liefert den Domain-Namen des Servers, von dem das Dokument geladen wurde	genauer erläutert
lastModified	liefert Datum und Uhrzeit der letzten Änderung des Dokuments	genauer erläutert
readyState	liefert den (Lade-) Status des Dokuments
referrer	liefert das URL des Dokuments, das das aktuelle Dokument aufgerufen hat
title	liefert oder steuert den Titel des Dokuments	genauer erläutert
URL	liefert den vollen URL des Dokuments	genauer erläutert

Methoden

Eigenschaftsname	Kurzbeschreibung
close()	schließt den Datenstrom, der mit document.open() zuvor geöffnet wurde
getElementById()	greift auf das erste Element zu, das die angegebene ID trägt	genauer erläutert
getElementsByName()	greift auf alle Elemente zu, die den angegebenen Namen tragen	genauer erläutert
getElementsByTagName()	greift auf alle Elemente zu, die den angegebenen Tag-Namen tragen	genauer erläutert
open()	öffnet einen Datenstrom, der den Output der Methoden document.write() und document.writeln() zusammenfasst
write()	schreibt HTML- oder JavaScript-Code in das Dokument
writeln()	schreibt HTML- oder JavaScript-Code in das Dokument und fügt jedem Statement einen Zeilenumbruch hinzu

Objektsammlungen

anchors[]

Das anchors[]-Array enthält alle Anker („Links“), die in einem Dokument vorhanden sind. Zur Erinnerung: ein Anker (engl. anchor) ist ein HTML-Element, dass in <a>-Tags gefasst ist. Ein Anker verweist entweder auf ein anderes Dokument (als a href="", = externer Link) oder auf eine Stelle im selben Dokument (als a name="", = interner Link). Wenn man auch <area>-Tags erfassen will, verwendet man nicht das anchors[]-, sondern das links[]-Array. Syntax:

document.anchors[].Eigenschaft

Weil anchors[] (ebenso wie alle anderen in diesem Kapitel genannten Objektsammlungen) ein Array ist, können hier alle Eigenschaften und Methoden angewandt werden, die generell für Arrays möglich sind. Die in der Praxis meist wichtigste Eigenschaft dieser Arrays ist allerdings die length-Eigenschaft; sie liefert die Zahl der Anker (bzw. Formulare, Bilder, Links), die in einem Dokument enthalten sind:

document.anchors[].length

forms[]

Das forms[]-Array enthält alle Formulare, die in einem Dokument vorhanden sind. Syntax:

document.forms[].Eigenschaft

Alle Formularelemente (Textfelder, Schalter usw.) sind Kinder (childNodes) jeweils eines Formulars und können nach folgendem Muster adressiert werden:

forms[Identifikator].elements[Identifikator]

Der Identifikator ist die laufende Nummer des Elements. Wie immer bei JavaScript beginnt die Nummerierung von Formularen und von Formularelementen nicht bei 1, sondern bei 0.

images[]

Das images[]-Array enthält alle Bilder, die in einem Dokument vorhanden sind. Zur Erinnerung: Bilder werden in HTML in <img>-Tags gefasst. Syntax:

document.images[].Eigenschaft

links[]

Das links[]-Array enthält alle Links, die in einem Dokument enthalten sind. Im Unterschied zum anchor[]-Array werden hier nicht <a>-Tags berücksichtigt, sondern <a href="">-Tags und <area>-Tags. Zur Erinnerung: mit <a href="">-Tags werden in HTML externe Links (Links auf andere Dokumente) und mit <area>-Tags klickbare Bereiche in Bildern codiert. Syntax:

document.links[].Eigenschaft

Eigenschaften

cookie

Die cookie-Eigenschaft liefert alle name/value-Paare von Cookies, die in dem Dokument enthalten sind. Syntax:

document.cookie

documentMode

Die documentMode-Eigenschaft wird nur vom Internet-Explorer unterstützt. Sie liefert den Modus, in dem das Dokument im Browser dargestellt wird (5 für IE5, 7 für IE7 und 8 für IE8).

domain

Die domain-Eigenschaft liefert den Domain-Namen des Servers, von dem das Dokument geladen wurde. Syntax:

document.domain

Für diese Buchseite z.B. würde die Domain so angegeben:
de.wikibooks.org

lastModified

Die lastModified-Eigenschaft liefert Datum und Uhrzeit der letzten Änderung des Dokuments. Syntax:

document.lastModified

Die Eigenschaft könnte z.B. das Folgende liefern: 02/22/2011 07:05:35

title

Die title-Eigenschaft liefert und steuert den Titel des Dokuments. Das ist der Text, der in den <title>-Tags des HTML angegeben ist. Syntax:

document.title

URL

Die URL-Eigenschaft liefert den vollen URL (Uniform Resource Locator, die „Internetadresse“) des Dokuments. Syntax:

document.URL

Für diese Buchseite z.B. würde der URL so angegeben:
http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Objekte:_Document

Methoden

getElementById()

Die getElementById()-Methode (Schreibweise beachten: getElementById) greift auf das erste Element zu, das die als id-Attribut angegebene Bezeichnung trägt. Syntax:

document.getElementById("id")

getElementsByName()

Die getElementsByName()-Methode (Schreibweise beachten: getElementsByName) greift auf alle Elemente zu, die die als name-Attribut angegebene Bezeichnung tragen. Syntax:

document.getElementsByName("name")

getElementsByTagName()

Die getElementsByTagName()-Methode (Schreibweise beachten: getElementsByTagName) greift auf alle Elemente zu, die die angegebene Tag-Bezeichnung tragen. Man kann damit gleichzeitig z.B. auf alle input- oder auf alle img-Elemente zugreifen. Syntax:

document.getElementsByTagName("tagname")

Weblinks

• w3schools.com HTML DOM Document Object