Zum Inhalt springen

Websiteentwicklung: JavaScript: Objekte: Document

Aus Wikibooks
Wikipedia hat einen Artikel zum Thema:


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'
      • ' Wort darin.'
    • Attribute:
      • style = "color:green"

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]
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

[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]
[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

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")
[Bearbeiten]

Einzelnachweise

[Bearbeiten]
  1. The HTML DOM Node Tree
  2. What is a Cookie?
  3. Document documentMode Property
  4. Document getElementsByTagName() Method