Das document-Objekt bezieht sich auf den Inhalt, der in einem Browser-Fenster angezeigt wird. In der Objekthierarchie von JavaScript liegt es unterhalb des 
window-Objekts.
Im Document Object Model (DOM) des W3-Konsortiums ist das document-Objekt das Ausgangsobjekt für den Elementenbaum. Die Elemente eines HTML-Dokuments stellen dem DOM zufolge also Unterobjekte des document-Objekts dar. Die einzelnen HTML-Elemente können dabei eigene Eigenschaften und Methoden haben. Diese werden im Abschnitt über HTML-Elementobjekte beschrieben. Entscheidend für den Zugriff auf den HTML-Elementenbaum sind beim document-Objekt die DOM-Methoden 
getElementById und getElementsByName.
Darüber hinaus enthält das document-Objekt selber eine Reihe wichtiger Eigenschaften und Methoden, die dokumentglobale Eigenschaften speichern oder Funktionen ausführen. Die meisten davon werden auch vom DOM unterstützt. Das Ansprechen dieser Eigenschaften und Methoden funktioniert wie folgt:
Beispiele:
x = document.title;
x = window.document.title;
Zweitfenster = window.open("datei2.htm", "Fenster");
x = Zweitfenster.document.title;
y = parent.frames[2].document.bgColor;
document.write("Hallo Welt");
window.document.write("Hallo Welt");
Zweitfenster.document.close();
parent.frames[2].document.close();
Erläuterung:
Eigenschaften des document-Objekts, wie etwa der Titel der angezeigten HTML-Datei (<title>...</title>), können Sie mit document ansprechen, den Titel der Datei also document.title. Entsprechend werden Methoden des document-Objekts angesprochen, zum Beispiel die write-Methode mit document.write(). Sie können auch window.document.title oder window.document.write() notieren. Da es sich dabei aber um den Inhalt des aktuellen Fensters handelt, ist die Angabe des Fensterobjekts nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster oder Frame-Fenster. In diesen Fällen müssen Sie das Fenster korrekt adressieren. Lesen Sie für zusätzliche Fenster den Abschnitt zur Verwendung des window-Objekts und für Frame-Fenster den Abschnitt über die Verwendung des frames-Objekts.
Speichert die Farbe für Verweise, während sie aktiviert sind, wie beim Attribut alink im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar ist (siehe auch Farben für Hintergrund, Text und Verweise).
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;
function AndereFarbe () {
if (i == 0) {
document.alinkColor = "#000000";
} else if (i == 1) {
document.alinkColor = "#FF0000";
} else if (i == 2) {
document.alinkColor = "#0000FF";
} else if (i == 3) {
document.alinkColor = "green";
}
i = i + 1;
if (i > 3)
i = 0;
}
</script>
</head><body>
<a href="javascript:AndereFarbe()">Verweisfarbe</a>
</body></html>
Erläuterung:
Das Beispiel ruft beim Aktivieren des Verweises eine Funktion namens AndereFarbe() auf. Diese Funktion ändert bei jedem ihrer Aufrufe den Wert für document.alinkColor. Beachten Sie, dass Farben dabei entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.
Beachten Sie:
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt body eine Eigenschaft namens aLink in Entsprechung zum
Attribut alink.
Speichert die Hintergrundfarbe der HTML-Datei, wie sie beim Attribut bgcolor im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar ist. (siehe auch Farben für Hintergrund, Text und Verweise).
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
var X = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var x1 = 0, x2 = 0;
var i = 0;
function setColor () {
document.bgColor = "#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
x2 = x2 + 1;
if (x2 % 16 == 0) {
x2 = 0;
x1 = x1 + 1;
}
i++;
if (i < 256)
window.setTimeout("setColor()", 10);
}
</script>
</head><body bgcolor="#000000">
<p><a href="javascript:setColor()">Hintergrund ändern</a></p>
</body></html>
Erläuterung:
Das Beispiel blendet beim Einlesen die Hintergrundfarbe von Schwarz über Graustufen nach Weiß auf. Dazu wird ein Array X definiert, in dem die Hexadezimalziffern 0 bis 9 und A bis F gespeichert werden.
Im Seitenkörper wird ein Verweis notiert, bei dessen Aktivierung die Funktion setColor() ausgeführt wird. Innerhalb dieser Funktion wird der Eigenschaft document.bgColor jeweils ein neuer Wert zugewiesen. Dabei wird aus den zuvor definierten Ziffern der Arrays X eine gültige Farbangabe konstruiert. Am Ende der Funktion ruft sich die Funktion über window.setTimeout() mit einer Zeitverzögerung von 10 Millisekunden selbst auf. Somit wird die Funktion 256 mal ausgeführt, bis die Hintergrundfarbe Weiß ist.
Beachten Sie, dass Farben entweder hexadezimal notiert werden, oder in Form erlaubter Farbnamen (siehe auch Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen. Im obigen Beispiel fehlen die Anführungszeichen, weil es sich um eine Zeichenkette handelt, die dynamisch konstruiert wird. Fixe Angaben wären beispielsweise "#0099CC" oder "blue".
Beachten Sie:
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von bgColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt body eine Eigenschaft namens bgColor in Entsprechung zum
Attribut bgColor.
Speichert die verwendete Zeichenkodierung eines Dokuments.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function iso5 () {
document.charset = "ISO-8859-5";
document.open();
document.write("Text mit ä ö ü");
document.close();
}
</script>
</head><body>
<a href="javascript:iso5()">iso-8859-5</a>
</body></html>
Erläuterung:
Das Beispiel enthält im Dateikopf eine Angabe zur verwendeten Zeichenkodierung des Dokuments. Dort wird ISO-8859-1 angegeben, die verbreitete Kodierung für westliche Sprachen, inklusive der deutschen. Ferner enthält die Datei einen Verweis. Beim Anklicken wird die Funktion iso5() aufgerufen. Diese Funktion ändert die verwendete Kodierung auf ISO-8859-5 (Kyrillisch). Anschließend werden dynamisch Inhalte in das Dokumentfenster geschrieben. Der Internet Explorer schreibt den angegebenen Text in das Dokumentfenster, schaltet dabei jedoch auf eine spezielle Unicode-Schriftart zur Darstellung um.
Beachten Sie, dass zum Schreiben des neuen Inhalts die Methoden open() und close() verwendet werden.
Beachten Sie:
Der Internet Explorer akzeptiert die geänderte Kodierung oft erst nach dem Reload der Seite und einer erneuten Ausführung der Änderung.
Cookies (cookies = Kekse - die Herkunft des Namens ist unbekannt) bieten Ihnen die Möglichkeit, direkt aus einer HTML-Datei heraus Daten auf dem Rechner des Anwenders zu speichern und beim erneuten Aufruf der gleichen HTML-Datei wieder auszulesen. So kann eine WWW-Seite dynamisch auf gespeicherte Daten reagieren. Es ist nur möglich, diejenigen Cookies auszulesen, die man selbst gesetzt hat. Eine Virenübertragung mit Cookies ist ausgeschlossen. Ein Cookie ist in etwa das gleiche wie ein Eintrag in einer INI-Datei unter Microsoft Windows. Es wird eine Variable mit einem zugewiesenen Wert abgespeichert, zum Beispiel Datum und Uhrzeit des letzten Besuchs der Web-Seite. Es können keine Rechnerdaten des Anwenders ausgelesen werden. Angesichts des vorherrschenden Misstrauens bei Anwendern, die nicht wissen, was ein Cookie ist, sollten Sie Cookies nur verwenden, wenn Sie einen Grund dazu haben.
Netscape verwaltet Cookies in einer Datei namens cookies.txt auf dem Rechner des Anwenders. Der Internet Explorer verwaltet die Cookies in einem Unterverzeichnis des Windows-Verzeichnisses.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
var gespeichert = "nichts gespeichert";
if (document.cookie) {
gespeichert = document.cookie;
} else {
document.cookie = "Zeitstempel=" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);
</script>
</head><body>
</body></html>
Erläuterung:
Das Lesen eines Cookies funktioniert nach dem Schema x = document.cookie.
Das Schreiben eines Cookies funktioniert nach dem Schema document.cookie = x.
Das Beispiel fragt beim Einlesen der Datei ab, ob diese Datei schon einmal einen Cookie gesetzt hat. Eine solche Abfrage ist mit if(document.cookie) möglich. Im Beispiel wird die Variable gespeichert mit dem Wert des gespeicherten Cookies versorgt, falls ein Cookie vorhanden ist. Im else-Zweig des Beispiels steht der Fall, dass noch kein Cookie gesetzt wurde. In diesem Fall wird als Cookie die Zeichenkette Zeitstempel und dahinter der Wert von lastModified geschrieben. Am Ende werden mit alert() zwei Werte ausgegeben: nämlich der Wert von document.lastModified und der Wert der Variablen gespeichert. Wenn ein Cookie gesetzt ist (also ab dem zweiten Aufruf der Datei), wird der Inhalt des Cookies ausgegeben, der sich von document.lastModified dann unterscheidet, wenn die Datei mittlerweile geändert wurde.
Beim Setzen eines Cookies können Sie außerdem einen Verfallszeitpunkt angeben. Wenn der Verfallszeitpunkt erreicht ist, löscht der Browser den Cookie selbständig. Notieren Sie dazu eine Anweisung der Form:
document.cookie = "expires=" + Verfallsdatum.
Damit der Browser diese Eigenschaft interpretiert, muss das Verfallsdatum mit der Methode toGMTString() des Date-Objektes formatiert werden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
var ablauf = new Date();
var infuenfTagen = ablauf.getTime() + (5 * 24 * 60 * 60 * 1000);
ablauf.setTime(infuenfTagen);
document.cookie = "Name=SELFHTML; expires=" + ablauf.toGMTString();
alert(document.cookie);
</script>
</head><body>
</body></html>
Erläuterung:
In der Variablen ablauf wird eine neue Instanz des Date-Objekt angelegt. Diese enthält das aktuelle Datum. Das Verfallsdatum ist 5 Tage nach dem Setzen des Cookies. Zur Bestimmung des Verfallsdatums wird das aktuelle Datum mit der Methode getTime() in Millisekunden umgewandelt. Zu diesem Wert wird die Anzahl der Millisekunden für 5 Tage addiert. Um den Millisekundenwert zu ermitteln, können Sie wie im Beispiel eine Multiplikationskette übergeben: 1000 Millisekunden sind eine Sekunde, mal 60 macht eine Minute, mal 60 macht eine Stunde, mal 24 ein Tag, und mal 5 macht fünf Tage.
Um eine gültige Datumszeichenkette zu erhalten, wird mit der Methode
setTime() dem Datum ein neuer Wert zugewiesen. In der Variablen ablauf ist dann das korrekte Ablaufdatum gespeichert.
Dem Cookie wird schließlich das mit der Methode toGMTString() formatierte Datum übergeben.
Beachten Sie:
Jede HTML-Datei hat Kenntnis von allen Cookies, die von Dateien aus dem gleichen oder einem höheren Verzeichnis gesetzt wurden. Angenommen, bei einer Domain http://www.test.de mit dem Unterverzeichnis /A gibt es in diesem Unterverzeichnis sowie im Wurzelverzeichnis / jeweils eine Datei namens x.htm. Beide Dateien enthalten jeweils ein JavaScript mit der Anweisung:
document.cookie = location.href;
Damit wird der URI der Datei in einem Cookie gespeichert. Ferner gibt es in beiden Verzeichnissen eine Datei y.htm, die jeweils folgende JavaScript-Anweisung enthält:
document.write(document.cookie);
Damit wird ein vorhandener Cookie dynamisch ins Dokumentfenster geschrieben. Bei der angenommenen Anordnung liefern folgende Dateien folgende Ausgaben:
http://www.test.de/y.htm liefert:
http://www.test.de/x.htm (kann also den Cookie lesen, den x.htm im gleichen Verzeichnis gesetzt hat)
http://www.test.de/A/y.htm liefert:
http://www.test.de/A/x.htm; http://www.test.de/x.htm (kann also den Cookie lesen, den x.htm im gleichen Verzeichnis gesetzt hat, sowie den Cookie, den die x.htm im Verzeichnis oberhalb gesetzt hat)
Mittels der Eigenschaft navigator.cookieEnabled können Sie abfragen, ob der Anwender Cookies aktiviert hat.
Opera bis Version 6 erlaubt kein Setzen von Cookies im Protokoll file://, also beim Aufrufen von HTML-Dateien mit JavaScript direkt von der Festplatte. Dies gilt ebenfalls für den Webbrowser Safari.
Speichert die Kodierung, die der Anwender als Standard im Browser eingestellt hat. Wenn die HTML-Datei keine Meta-Angabe zur verwendeten Kodierung enthält, benutzt der Browser diese Kodierung.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
alert("Sie haben als Zeichenkodierung eingestellt: " + document.defaultCharset);
</script>
</head><body>
</body></html>
Erläuterung:
Das Beispiel gibt beim Einlesen der Datei mit alert() aus, welche Kodierung der Anwender als Standard eingestellt hat.
Speichert die Farbe für Text, wie beim Attribut text im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Farben für Hintergrund, Text und Verweise).
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
document.fgColor = "#FF0000";
}
</script>
</head><body>
<p>Ein kleiner Text</p>
<p><a href="javascript:FarbeAendern()">Textfarbe ändern</a></p>
</body></html>
Erläuterung:
Im Beispiel wird eine Funktion namens FarbeAendern() definiert und ein Verweis, der beim Aktivieren diese Funktion ausführt. Die Funktion ändert die Textfarbe auf rot (#FF0000).
Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.
Beachten Sie:
Farbänderungen für die Textfarbe können je nach Browser erst dann möglich sein, nachdem die HTML-Seite komplett eingelesen wurde. Deshalb wurde das Beispiel so konzipiert, dass die Farbänderung erst nach dem Laden durchgeführt wird.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von fgColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt body eine Eigenschaft namens text in Entsprechung zum
Attribut text.
Speichert Datum und Uhrzeit der letzten Änderung der Datei.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("letzter Update: " + document.lastModified);
</script>
</body></html>
Erläuterung:
Das Beispiel schreibt mit der Methode write() den Zeitpunkt der letzten Änderung dynamisch in die HTML-Datei.
Beachten Sie:
Die Formatierung der Zeichenkette ist stark abhängig vom Browser und dem verwendeten Betriebssystem. So kann bei der Weiterverarbeitung dieser Eigenschaft mit dem Date-Objekt eine zweistellige Jahreszahl übergeben und dadurch ein falscher Wochentag und ein falsches Jahr zurückgegeben werden.
Speichert die Farbe für unbesuchte Verweise, wie beim Attribut link im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Farben für Hintergrund, Text und Verweise).
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
document.linkColor = "#FF0000";
}
</script>
</head><body>
<p><a href="http://news.bbc.co.uk/">Verweis</a></p>
<p><a href="javascript:FarbeAendern()">Verweisfarbe ändern</a></p>
</body></html>
Erläuterung:
Im Beispiel werden zwei Verweise notiert. Der erste verweist auf eine Seite, von der angenommen wird, dass sie der Browsre nicht als besucht ansieht. Der zweite Verweise führt beim Aktivieren eine Funktion namens FarbeAendern(), die im Seitenkopf definiert ist. Diese Funktion ändert die Farbe für unbesuchte Links auf rot (#FF0000).
Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.
Beachten Sie:
Konqueror 3.1 ermöglicht das Auslesen der Eigenschaft linkColor, wenn ein link-Attribut beim Element body vorhanden ist. Das Setzen ist zwar möglich, die Farbe der Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3.3.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von linkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt body eine Eigenschaft namens link in Entsprechung zum Attribut link.
Speichert den URI, von dem aus die aktuelle Datei aufgerufen wurde. Voraussetzung ist, dass er die aktuellen Datei über einen Verweis aufgerufen hat. Wenn er die Adresse der Datei stattdessen etwa als Lesezeichen ausgewählt oder direkt in die Adresszeile des Browsers eingegeben hat, ist in document.referrer nichts gespeichert. Beim Internet Explorer und in Netscape 6 wird in document.referrer nur dann etwas gespeichert, wenn der Aufruf der aktuellen Datei über das HTTP-Protokoll erfolgte, also mit einem Verweis vom Typ http://.... Einige Browser ermöglichen es dem Anwender zudem, den Zugriff auf diese Eigenschaft zu unterbinden. Sie können sich daher nicht darauf verlassen, dass document.referrer gefüllt ist.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("<h1>Lieber Besucher<\/h1>");
document.write("Du hast also von " + document.referrer + " hierher gefunden");
</script>
</body></html>
Erläuterung:
Das Beispiel gibt im HTML-Text mit der Methode write() aus, von woher der Anwender die aktuelle Datei aufgerufen hat.
Speichert den Titel einer HTML-Datei, wie er bei <title>...</title> vergeben wurde.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<h1>
<script type="text/javascript">
document.write(document.title);
</script>
</h1>
</body></html>
Erläuterung:
Das Beispiel schreibt mit der Methode write() den Titel der HTML-Datei dynamisch als Inhalt in eine Überschrift 1. Ordnung (<h1>...</h1>).
Beachten Sie:
In Netscape JavaScript ist die Eigenschaft document.title als nur lesbar definiert, gemäß dem HTML-spezifischen DOM und Microsofts JScript allerdings können Sie diese Eigenschaft auch ändern. Unter anderem der Internet Explorer, Opera, Firefox, Safari und Konqueror unterstützen dies.
Speichert den vollständigen URI des aktuellen Dokuments.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
window.alert("Diese Datei: " + document.URL);
</script>
</body></html>
Erläuterung:
Das Beispiel gibt mit alert() die vollständige Adresse des gegenwärtigen HTML-Dokuments aus.
Beachten Sie:
Vermeiden Sie es, die Adresse des Dokuments mit der Methode write() direkt und ungefiltert auszugeben. Ein Angreifer kann die Adresse so manipulieren, dass auf diese Weise fremder HTML- und JavaScript-Code in die Seite eingeschleust wird. Gelingt es dem Angreifer, dass jemand Ihre Site über die manipulierte Adresse besucht, stellt dies möglicherweise ein Sicherheitsrisiko dar. Diese Angriffsmethode wird Cross Site Scripting genannt. Viele dynamische Webseiten, zum Beispiel Online-Banking, E-Mail-Dienste, Online-Shops sowie Foren und Communities, arbeiten mit Cookie-basierter Authentifizierung. Gelingt es dem Angreifer, fremden JavaScript-Code einzuschleusen, kann er eine solche Sitzung übernehmen und missbrauchen (sogenanntes Session Hijacking).
Speichert die Farbe für Verweise zu bereits besuchten Seiten, wie beim Attribut vlink im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Farben für Hintergrund, Text und Verweise).
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
document.vlinkColor = "#A0A0A0";
}
</script>
</head><body>
<p><a href="../document.htm">besuchter Verweis</a></p>
<p><a href="javascript:FarbeAendern()">Farbe ändern</a></p>
</body></html>
Erläuterung:
Im Beispiel wird ein Verweis zu einer bereits besuchten Seite notiert. Der Kopf der Datei enthält eine JavaScript-Funktion FarbeAendern(), welche durch das Aktivieren eines weiteren Verweises im Dateikörper aufgerufen wird. Die Funktion ändert die Farbe für besuchte Links zu einem Grauton (#A0A0A0).
Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.
Beachten Sie:
Konqueror 3.1 ermöglicht das Auslesen der Eigenschaft vlinkColor, wenn ein vlink-Attribut beim Element body vorhanden ist. Das Setzen ist zwar möglich, die Farbe der besuchten Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3.3.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von vlinkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt body eine Eigenschaft namens vLink in Entsprechung zum Attribut vlink.
Überwacht Anwenderereignisse im aktuellen Dokument. Funktioniert genau so wie captureEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass Sie mit document.captureEvents() nur Ereignisse innerhalb des Dokumentfensters überwachen können, jedoch keine Ereignisse im gesamten Fensterbereich (zu dem beispielsweise auch Titelleiste, Menüleisten usw. gehören).
Beachten Sie:
Netscape 6 interpretiert diese Methode nicht mehr.
Schließt einen Dokumentinhalt, der mit der open()-Methode geöffnet und mit den Methoden write() oder writeln() beschrieben wurde.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.open();
document.write(document.URL);
document.close();
</script>
</body></html>
Erläuterung:
Das Beispiel öffnet den Dokumentinhalt zum Schreiben, dann schreibt es etwas (den aktuellen URI) mit der Methode write(), und zuletzt schließt es den Vorgang mit document.close() ab.
Mit dem Schließen des Dokumentes wird dem Browser signalisiert, dass der Aufbau der Seite abgeschlossen ist. Dies ist besonders beim dynamischen Schreiben von 
Frames und zum Beschreiben von Layern erforderlich.
Erzeugt ein neues Attribut für den Elementenbaum. Lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<h1>Eine sehr dynamische Seite</h1>
<script type="text/javascript">
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);
</script>
</body></html>
Erläuterung:
Das Beispiel enthält eine Überschrift erster Ordnung ohne weitere Attribute. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createAttribute("align") ein neues Attribut mit Namen align erzeugt, das in diversen HTML-Elementen zum Ausrichten des Inhalts verwendet werden kann. Das Attribut hat damit aber noch keine Wirkung - es hängt weder im Elementenbaum des Dokuments, noch hat es einen Wert. Das Attribut ist lediglich als Objekt erzeugt.
Die Methode createAttribute() gibt das erzeugte Objekt, also in dem Fall das align-Attribut, zurück. Der Rückgabewert wird in der Variablen Ausrichtung gespeichert. Über diese Variable ist das neu erzeugte Attribut von da ab ansprechbar.
Damit das Attribut einen Inhalt erhält, wird der dem Attributknoten über die Objekteigenschaft nodeValue der gewünschte Wert right zugewiesen. Anschließend müssen das Attribut und sein Wert noch in den vorhandenen Elementenbaum eingehängt werden. Dies geschieht in der Anweisung Element.setAttributeNode(Ausrichtung); (siehe auch setAttributeNode()). Dabei wurde zuvor in der Variablen Element das h1-Element gespeichert, auf das mit getElementsByTagName() zugegriffen wurde. Somit wird die Überschrift dynamisch rechtsbündig ausgerichtet.
Beachten Sie:
Mit dem Internet Explorer 5.5 war dieses Beispiel nicht nachvollziehbar, wenngleich Microsoft behauptet, diese Methode in den Internet Explorer implementiert zu haben. Im Internet Explorer 6 ist das Beispiel dagegen nachvollziehbar.
Erzeugt ein neues Element für den Elementenbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="border:1px black solid; padding:10px">
</div>
<script type="text/javascript">
var myH1 = document.createElement("h1");
var myText = document.createTextNode("Eine sehr dynamische Seite");
myH1.appendChild(myText);
var Ausgabebereich = document.getElementById("Bereich");
Ausgabebereich.appendChild(myH1);
</script>
</body></html>
Erläuterung:
Das Beispiel enthält einen div-Bereich, der zunächst leer ist. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createElement("h1") ein neues Element vom Typ h1 erzeugt, also eine HTML-Überschrift erster Ordnung. Die Überschrift wird damit aber noch nicht angezeigt - sie hängt noch nicht einmal im Elementenbaum des Dokuments. Das Element ist lediglich als Objekt erzeugt.
Die Methode createElement() gibt das erzeugte Objekt, also in dem Fall das h1-Element, zurück. Der Rückgabewert wird in der Variablen myH1 gespeichert. Über diese Variable ist das neu erzeugte Element von da ab ansprechbar.
Damit die Überschrift einen Inhalt erhält, wird mit createTextNode() ein Textknoten erzeugt. Mit appendChild() wird dann der Textknoten als Kindelement der Überschrift erster Ordnung definiert. Anschließend muss noch die ganze Überschrift in den vorhandenen Elementenbaum eingehängt werden. Dies geschieht in der Anweisung Ausgabebereich.appendChild(myH1);. Dabei wurde zuvor in der Variablen Ausgabebereich das leere div-Element gespeichert, auf das mit getElementById() zugegriffen wurde. Somit wird die Überschrift mit ihrem Text als Kindelement dynamisch in den div-Bereich eingefügt.
Erzeugt einen neuen Textknoten für den Elementenbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<p id="Absatz"></p>
<script type="text/javascript">
var Zeitstempeltext = document.createTextNode(document.lastModified);
var TextZuvor = document.createTextNode("Datum des letzten Updates: ");
document.getElementById("Absatz").appendChild(TextZuvor);
document.getElementById("Absatz").appendChild(Zeitstempeltext);
</script>
</body></html>
Erläuterung:
Das Beispiel enthält einen p-Absatz, der zunächst leer ist. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createTextNode() zwei neue Zeichenketten erzeugt, einmal der gespeicherte Wert von lastModified, und einmal ein statischer Text. Die Texte werden damit aber noch nicht angezeigt - sie sind auch noch nicht in den Elementenbaum des Dokuments eingehängt. Die Textknoten sind lediglich als Objekt erzeugt.
Die Methode createTextNode() gibt das erzeugte Objekt zurück. Der Rückgabewert wird in den beiden Beispielaufrufen in den Variablen Zeitstempeltext und TextZuvor gespeichert. Über diese Variablen sind die neu erzeugten Textknoten von da ab ansprechbar.
Mit appendChild() werden dann die Textknoten als Kindelemente des über dem JavaScript notierten Textabsatzes definiert. Dazu wird mit getElementById() auf das p-Element zugegriffen. Der leere Absatz erhält somit dynamisch einen Inhalt.
Beachten Sie:
Konqueror vor Version 3.4 und Safari vor 1.3 interpretieren createTextNode() bereits. Das oben angeführte Beispiel zeigt dies jedoch nicht, da diese älteren Browserversionen lastModified noch nicht interpretieren.
Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein id-Attribut besitzt.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function Ausrichten (wie) {
document.getElementById("unentschlossen").align = wie;
}
</script>
</head><body>
<h1 id="unentschlossen">Wo gehöre ich eigentlich hin?</h1>
<a href="javascript:Ausrichten('left')">links?</a><br>
<a href="javascript:Ausrichten('center')">zentriert?</a><br>
<a href="javascript:Ausrichten('right')">rechts?</a><br>
</body></html>
Erläuterung:
Das Beispiel enthält eine Überschrift erster Ordnung mit dem Attribut id="unentschlossen". Unterhalb davon sind drei Verweise notiert. Jeder der Verweise ruft die Funktion Ausrichten() auf, die im Dateikopf notiert ist, und übergibt ihr jeweils einen anderen Wert. Innerhalb der Funktion Ausrichten() wird mit document.getElementById("unentschlossen") auf die Überschrift erster Ordnung zugegriffen. Die Funktion weist der Eigenschaft align den jeweils übergebenen Wert zu. Dadurch wird die Ausrichtung der Überschrift dynamisch geändert.
Beachten Sie:
Die Methode getElementById() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an.
Sie können an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z.B. getElementById(Variablenname).
Voraussetzung ist jedoch, dass die Variable auch existiert.
Opera 5 und 6 kennen die Methode getElementById() zum Ansprechen von Elementen ebenfalls. Das obige Beispiel funktioniert jedoch in diesen Browsern nicht.
Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function Ankreuzen () {
document.getElementsByName("Zutat")[0].checked = true;
}
</script>
</head><body>
<form name="Formular" action="">
<input type="checkbox" name="Zutat" value="Salami"> Salami <br>
<input type="checkbox" name="Zutat" value="Pilze"> Pilze <br>
<input type="checkbox" name="Zutat" value="Oliven"> Oliven <br>
<input type="button" value="Test" onclick="Ankreuzen()">
</form>
</body></html>
Erläuterung:
Im Beispiel wird eine Gruppe von Checkboxen definiert, die alle den gleichen Namen, nämlich Zutat, haben. Darunter ist ein Klick-Button notiert, bei dessen Anklicken die Funktion Ankreuzen() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion kreuzt die erste der drei Checkboxen an. Durch getElementsByName("Zutat")[0] greift sie auf das erste Element mit name="Zutat" zu. Auch wenn ein solcher Elementname nur einmal im Dokument vorkommt, muss stets mit Array-Syntax auf die Elemente zugegriffen werden. So wäre im Beispiel das Formularelement etwa über getElementsByName("Formular")[0] ansprechbar. Die zweite Checkbox mit dem Namen "Zutat" wäre über getElementsByName("Zutat")[1] ansprechbar usw.
Beachten Sie:
Die Methode getElementsByName() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an.
Sie können an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z.B. getElementsByName(Variablenname).
Voraussetzung ist jedoch, dass die Variable auch existiert.
Greift entsprechend dem DOM auf ein beliebiges Element im Elementenbaum des Dokuments zu. Maßgeblich ist dabei der Elementname, in HTML also beispielsweise Namen wie h1, blockquote oder img. Für jeden HTML-Elementtyp wird im Dokument ein Array erzeugt, über den die einzelnen Elemente dann ansprechbar sind.
Wenn Sie anstatt den Namen eines HTML Elementes ein Sternchen "*" als Parameter übergeben, können alle HTML Elemente eines Dokumentes angesprochen werden.
Diese Methode ist nicht Bestandteil des HTML-spezifischen DOM, sondern des allgemeinen Kern-DOM für beliebige XML- bzw. SGML-basierte Dokumente. Nicht alle Eigenschaften und Methoden des document-Objekts des Kern-DOM werden hier beschrieben.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function neueTexte () {
document.getElementsByTagName("p")[0].firstChild.data = "neuer erster";
document.getElementsByTagName("p")[1].firstChild.data = "neuer zweiter";
document.getElementsByTagName("p")[2].firstChild.data = "neuer dritter";
document.getElementsByTagName("h1")[0].firstChild.data = "Alles anders";
}
</script>
</head><body>
<h1>Dynamisch, sehr dynamisch</h1>
<p>Ein erster Absatz</p>
<p>Ein zweiter Absatz</p>
<p>Ein dritter Absatz</p>
<p><a href="javascript:neueTexte()">neue Texte</a></p>
</body></html>
Erläuterung:
Im Beispiel werden eine Überschrift erster Ordnung und drei Textabsätze notiert. Keines dieser Elemente enthält irgendein Attribut, über das es individuell angesprochen werden könnte. Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Funktion neueTexte() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion ändert dynamisch die Texte aller drei Textabsätze und der Überschrift.
Über document.getElementsByTagName("p")[0] greift sie auf den ersten Textabsatz des Dokuments zu, über document.getElementsByTagName("p")[1] auf den zweiten, über document.getElementsByTagName("h1")[0] auf die erste Überschrift erster Ordnung usw.
Beachten Sie:
Die Methode getElementsByTagName() regelt lediglich den Zugriff auf Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an. Die Eigenschaft firstChild.data, die im obigen Beispiel verwendet wird, um den im Element enthaltenen Text dynamisch zu ändern, gehört ebenfalls zum Komplex des node-Objekts.
Opera Version 5.12 kennt die Methode getElementsByTagName() zum Ansprechen von Elementen. Das obige Beispiel funktioniert aufgrund von firstChild jedoch erst ab Version 7.
Ermittelt Text, der vom Anwender im Dokument selektiert wurde. Im Netscape 4 war diese diese Methode an das document-Objekt gebunden. Seit Netscape 6 ist sie dem window-Objekt zugeordnet.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function selektierterText () {
if (window.getSelection) {
alert(window.getSelection());
} else if (document.getSelection) {
alert(document.getSelection());
} else if (document.selection) {
alert(document.selection.createRange().text);
}
}
</script>
</head><body>
viel Text zum Selektieren viel Text zum Selektieren
<form>
<input type="button" value="zeigen" onmousedown="selektierterText();">
</form>
</body></html>
Erläuterung:
Das Beispiel ruft beim Klick auf den definierten Button die Funktion selektierterText() auf. Innerhalb dieser Funktion wird geprüft, ob der Browser die window-Methode window.getSelection() kennt. Tritt dieser Fall ein, so wird sie aufgerufen und der selektierte Text wird ausgegeben. Kennt der Browser diese Methode nicht, so wird geprüft, ob er die Methode document.getSelection() kennt und gegebenenfalls der selektierte Text ausgegeben.
Der zweite else-if-Zweig des Beispiels behandelt einen Sonderfall für den Internet Explorer. Dieser kennt die Methode getSelection() nicht, jedoch ein selection-Objekt. Mit document.selection.createRange().text erhalten Sie hier den selektierten Text. Voraussetzung ist, dass zuvor Text selektiert wurde. Ansonsten liefert die Funktion selektierterText() eine leere Zeichenkette ("") als Ergebnis.
Beachten Sie:
Konqueror 3.1 interpretiert diese Methode noch nicht.
Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() im Zusammenhang mit dem window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.handleEvent() nur Ereignisse übergeben kann, die mit document.captureEvents() überwacht werden.
Beachten Sie:
Netscape 6 interpretiert diese Methode nicht mehr.
Öffnet ein Dokument zum Schreiben. Dabei wird kein Fenster geöffnet, sondern der Fensterinhalt zum Neubeschreiben freigegeben. Falls das Dokument vorher einen Inhalt hatte, zum Beispiel eine zunächst geladene HTML-Datei, sollten Sie zuerst die close()-Methode aufrufen.
Gemäß dem HTML-spezifischen DOM erwartet open() keine Parameter. Gemäß den JavaScript-Spezifikationen von Netscape hingegen erwartet die Methode zwei optionale Parameter. Sie kann demnach ohne, mit einem oder mit zwei Parametern aufgerufen werden. Folgende Parameter werden definiert:
1. MIME-Typ = Eine Bezeichnung des MIME-Typs für die Art der Daten, die in das Dokumentfenster geschrieben werden sollen. So können Sie das Dokumentfenster beispielsweise durch Angabe von "x-world/x-vrml" zum Schreiben von VRML-Code öffnen. Mit den write()- und writeln()-Methoden können Sie dann dynamisch VRML-Code schreiben.
2. replace = mit document.open("text/html", "replace") öffnen Sie das Dokument zum Schreiben von HTML und bewirken, dass der neue Dokumentinhalt die gleiche Stelle in der History der besuchten Seiten einnimmt wie das Dokument, in dem der open()-Methodenaufruf steht.
Die meisten aktuellen Browser folgen jedoch der Definition des HTML-spezifischen DOM und ignorieren die Parameter. Lediglich Netscape 4.x (neuere Versionen nicht) und der Internet Explorer beachten sie.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function Wechsel () {
document.open();
document.write('<a href="datei.htm">Und jetzt steh ich hier</a>');
document.close();
}
document.open();
document.write('<a href="javascript:Wechsel()">Noch steh ich hier</a>');
document.close();
</script>
</body></html>
Erläuterung:
Das Beispiel-Script führt zunächst den unteren Teil des Codes aus, da der obere in die Funktion Wechsel() eingebunden ist, die erst bei Aufruf ausgeführt wird. Im unteren Teil wird mit JavaScript dynamisch ein Verweis in das Dokumentfenster geschrieben. Wenn der Anwender den Verweis anklickt, wird die Funktion Wechsel() aufgerufen. Diese Funktion öffnet das Dokumentfenster zum neuen Schreiben und schreibt dynamisch einen Verweis auf die aktuelle Datei (im Beispiel wird angenommen, dass diese Datei datei.htm heißt). Klickt der Anwender auf den Verweis, wird die Datei erneut geladen, und dadurch wird wieder der erste Verweis geschrieben.
Beachten Sie, dass das Beispiel erst ab Netscape 3.x so funktioniert wie beschrieben. Netscape 2.x kennt die document.open() zwar auch schon, doch leert dabei das Dokumentfenster nicht.
Beachten Sie:
Opera 5.12 kennt laut Dokumentation die Methode open() und wendet sie in vielen Fällen richtig an. Das vorliegende Beispiel wird jedoch vom Browser nicht abgeschlossen und nur ohne Verwendung von document.open() richtig ausgeführt. Als Alternative können Sie die Funktion mit <a href="#" onclick="Wechsel(); return false"> aufrufen.
Beendet die Überwachung von Anwenderereignissen. Funktioniert genau so wie releaseEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.releaseEvent() nur Ereignisüberwachungen beenden kann, die mit document.captureEvents() gestartet wurden.
Beachten Sie:
Netscape 6 interpretiert diese Methode nicht mehr.
Übergibt ein Anwenderereignis an das document-Objekt. Von dort aus wird das Ereignis immer weiter nach unten durchgereicht, bis sich ein Event-Handler findet, der das Ereignis verarbeitet. Funktioniert genau so wie routeEvent() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.routeEvent() nicht auf Fensterebene ansetzt, sondern auf Dokumentebene.
Beachten Sie:
Netscape 6 interpretiert diese Methode nicht mehr.
Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als Parameter.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
DeinName = prompt("Bitte Deinen Namen angeben:", "Name");
document.write("<b>Hallo " + DeinName + "<\/b>");
</script>
</body></html>
Erläuterung:
Das Beispiel zeigt beim Einlesen der Datei mit prompt() ein Dialogfenster an, in dem der Anwender seinen Namen eingeben soll. Der eingegebene Wert wird in der Variablen DeinName gespeichert. Anschließend wird mit document.write() das Wort "Hallo" mit einem Leerzeichen dahinter geschrieben. An die Zeichenkette angehängt wird die Variable DeinName. Dadurch steht hinterher beispielsweise "Hallo Susi" im Text, wenn in dem Dialogfenster "Susi" als Name angegeben wurde. Damit die Ausgabe in Fettschrift erfolgt, wird sie in das entsprechende HTML-Element gesetzt.
Es ist auch erlaubt, mehrere Zeichenketten oder Ausdrücke durch Kommata getrennt innerhalb von document.write() zu verwenden, zum Beispiel:
document.write("Sie benutzen ", document.layers ? "Netscape ab V4" : "nicht Netscape ab V4");
Dieses Beispiel enthält zunächst eine Zeichenkette und dann, durch ein Komma getrennt, einen komplexen Ausdruck, in dem ermittelt wird, ob der Anwender einen Browser benutzt, der das layers-Objekt kennt.
Beachten Sie:
Der Schrägstrich / in schließenden HTML-Tags muss bei der Ausgabe mit dem Zeichen \ maskiert werden. Das gilt besonders dann, wenn Sie dynamisch weiteren JavaScript-Code in der Form document.write("<script>...</script>") schreiben möchten. Maskiert <script>...<\/script> geschrieben, wird der dynamisch geschriebene Script-Bereich als eigenständiger Block interpretiert, und das aktuelle Script wird unabhängig davon weiter ausgeführt.
Wie write() - fügt jedoch am Ende automatisch ein Zeilenumbruch-Zeichen ein. Dadurch ist diese Methode vor allem zum Schreiben von Inhalten interessant, bei denen Zeilenumbrüche wichtig sind.
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("<pre>kein Umbruch ");
document.writeln("erste Zeile");
document.writeln("zweite Zeile <\/pre>");
document.writeln("dritte Zeile");
document.writeln("vierte Zeile");
</script>
</body></html>
Erläuterung:
In der ersten Zeile wird mit document.write() ein präformatierter Text eingeleitet. Dieser dient im Beispiel dazu, die Zeilenumbrüche sichtbar zu machen. Die Methode document.write() erzeugt keinen Zeilenumbruch. Der Inhalt der nachfolgenden Zeile ("erste Zeile") wird deshalb in der gleichen Zeile ausgegeben. Da diese Zeichenkette jedoch mit document.writeln() ausgegeben wird, entsteht im Quelltext am Ende ein Zeilenumbruch. Die nächste Zeile ("zweite Zeile") wird deshalb in einer neuen Zeile ausgegeben. Zugleich wird im Beispiel in dieser Zeile der präformatierte Abschnitt beendet. Die dritte und die vierte Zeile werden ebenfalls mit document.writeln() geschrieben. Intern entstehen Zeilenumbrüche im Quelltext. Bei der Ausgabe im Browser sind diese jedoch nur als Leerzeichen sichtbar, getreu der HTML-Regel, dass Zeilenumbrüche in Leerzeichen umgewandelt werden.
© 2007 Impressum
SELFHTML/Navigationshilfen 
alinkColor
lastModified
captureEvents()
