Websiteentwicklung: JavaScript: Objekte: Document
Allgemeines[Bearbeiten]
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[Bearbeiten]
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?[Bearbeiten]
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?[Bearbeiten]
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).[1]
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'
- Kinder (childNodes):
- ' Wort darin.'
- Attribute:
- style = "color:green"
- Kinder (childNodes):
Objektsammlungen, Eigenschaften und Methoden[Bearbeiten]
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[Bearbeiten]
| 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 |
| 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 |
| 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[Bearbeiten]
anchors[][Bearbeiten]
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[][Bearbeiten]
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[][Bearbeiten]
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[][Bearbeiten]
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[Bearbeiten]
cookie[Bearbeiten]
Die cookie-Eigenschaft liefert alle name/value-Paare von Cookies, die in dem Dokument enthalten sind.[2] Syntax:
document.cookie
documentMode[Bearbeiten]
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).[3]
domain[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
getElementById()[Bearbeiten]
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()[Bearbeiten]
Die getElementsByName()-Methode (Schreibweise beachten: getElementsByName) greift auf alle Elemente zu, die die als name-Attribut angegebene Bezeichnung tragen. Syntax:
document.getElementsByName("name")
getElementsByTagName()[Bearbeiten]
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.[4] Syntax:
document.getElementsByTagName("tagname")
Weblinks[Bearbeiten]
- w3schools.com HTML DOM Document Object