JavaScript Document Objekt

Direkt unterhalb des Window-Objekts angesiedelt, speichert das Document-Objekt den Inhalt des Browserfensters. Es ist im Document-Object-Model (DOM) das Wurzelobjekt für den Elementenbaum eines HTML-Dokuments. Die in ihm gespeicherten Elemente – also die Elemente einer HTML-Seite, wie beispielsweise Textabsätze (definiert durch das p-Tag) oder Form-Elemente – sind danach im Document-Objekt gespeichert. Über das Document-Objekt kann auf die einzelnen in ihm gespeicherten Kindelemente zugegriffen werden. Dabei können die im Document-Objekt gespeicherten Kindelemente wiederum über spezielle Methoden oder Eigenschaften verfügen.

Für den Zugriff auf die einzelnen HTML-Elemente des HTML-Dokuments, die sich im HTML-Elementenbaum befinden, stellt das Document-Objekt eigene Methoden zur Verfügung. Dies sind die Methoden getElementById(), getElementsByName() und getElementsByTagName(). Mit Hilfe dieser Methoden können einzelne Elemente des HTML-Dokuments direkt angesprochen werden. Bei getElementById wird das HTML-Element über seine id-Eigenschaft ermittelt. GetElementsByName ermittelt alle Elemente, die einen bestimmten Wert in der name-Eigenschaft besitzen und getElementsByTagName liefert alle HTML-Elemente, die einen bestimmten Tag-Typ haben – also Elemente eines bestimmten Typs.

Während die Methode getElementById ein einzelnes HTML-Element liefert – die Element-ID sollte also eindeutig sein; existieren mehrere Elemente mit der gleichen ID, so wird stets das erste gefundene Element in der Element-Hierarchie geliefert –, geben die Methoden getElementsByName und getElementsByTagName ein Array zurück, welches die im HTML-Dokument enthaltenen Seitenelemente beinhaltet. Alle im HTML-Dokument enthaltenen Elemente lassen sich über das Array dann gezielt ansprechen. Welche Methoden oder Eigenschaften diese Elemente unterstützen, hängt dabei vom Typ des gelieferten HTML-Elements ab.

JavaScript Document Beispiel: Eigenschaften des Document-Objekts

Das Document-Objekt selbst enthält einige Eigenschaften – wie beispielsweise die Eigenschaft URL –, die als solche im Objekt gespeichert sind. Folgendes Beispiel zeigt, wie die Eigenschaften des Document-Objekts angesprochen werden können. Der Zugriff auf die einzelnen Eigenschaften des Document-Objekts erfolgt über den Punkt-Operator (in der Form document.Eigenschaftsname). Die Eigenschaften werden dabei zunächst in einer Zeichenkette gespeichert und dann mit Hilfe der, ebenfalls zum Document-Objekt gehörigen, Methode write() ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Zeichenkette definieren, in der die Eigenschaften zur
// späteren Ausgabe zwischengespeichert werden
var eigenschaften = "Eigenschaften von document:<br>";
// Eigenschaften ermitteln und im String speichern
eigenschaften += "title = " + document.title + "<br>";
eigenschaften += "url = " + document.URL + "<br>";
eigenschaften += "referrer = " + document.referrer + "<br>";
eigenschaften += "charset = " + document.charset + "<br>";
eigenschaften += "defaultCharset = " + document.defaultCharset + "<br>";
eigenschaften += "cookie = " + document.cookie + "<br>";
eigenschaften += "lastModified = " + document.lastModified + "<br>";
eigenschaften += "alinkColor = " + document.alinkColor + "<br>";
eigenschaften += "bgColor = " + document.bgColor + "<br>";
eigenschaften += "fgColor = " + document.fgColor + "<br>";
eigenschaften += "linkColor = " + document.linkColor + "<br>";
eigenschaften += "vlinkColor = " + document.vlinkColor + "<br>";
// Daten ausgeben
document.write (eigenschaften);
// -->
</script>