SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
 |
document |
|
Eigenschaften:
Methoden:
Unterobjekte:
|
 | |
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 Elementbaum. 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-Elementbaum 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:
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(); |
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.
 |
alinkColorSpeichert die Farbe für Verweise, während sie angeklickt werden, 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).
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>
|
Das Beispiel ruft beim Anklicken 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.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen.
Opera 5.12 interpretiert die Eigenschaft alinkColor nicht.
|
|
bgColorSpeichert 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).
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;
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; }
}
for(var i = 0; i < 255; ++i) {
window.setTimeout("setColor()",20);
}
//-->
</script>
</head><body>
</body></html>
|
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. In einer for-Schleife wird von 0 bis 255 gezählt. Der Grund ist, dass 255 der maximale Wert (dezimal gesehen) eines RGB-Farbwerts sein kann. Innerhalb der Schleife wird mit window.setTimeout() nach jeweils 20 Millisekunden Verzögerungszeit die Funktion setColor() aufgerufen. Innerhalb dieser Funktion wird der Eigenschaft document.bgColor jeweils ein neuer Wert zugewiesen. Dabei wird aus den zuvor definierten Ziffern das Arrays X eine gültige Farbangabe konstruiert.
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 tut er das nicht, weil es sich um eine Zeichenkette handelt, die dynamisch konstruiert wird. Fixe Angaben wären beispielsweise "#0099CC" oder "blue".
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von bgColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen.
In vielen Dokumentationen wird angegeben, dass die hexadezimale Farbangabe ohne das Gatterzeichen (#) zu erfolgen hat. Der Netscape 6 interpretiert jedoch unter Doctypeangaben wie z.B. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> die Farbe nur dann, wenn ein Gatterzeichen (#) notiert wurde.
Da die Verwendung des Gatterzeichens auch in älteren Browsern keine Probleme verursacht, empfiehlt es sich, dieses stets zu notieren.
Opera 5.12 interpretiert die Eigenschaft document.bgColor noch nicht. Netscape 6.1 interpretiert das obige Beispiel (im Gegensatz zu Netscape 4.x) nicht.
|
|
charsetSpeichert den definierten Zeichensatz eines Dokuments.
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>
|
Das Beispiel enthält im Dateikopf eine Angabe zur Definition des Zeichensatzes. Dort wird iso-8859-1 definiert (der Standard-Zeichensatz für westliche Sprachen, inklusive der deutschen). Ferner enthält die Datei einen Verweis. Beim Anklicken wird die Funktion iso5() aufgerufen. Diese Funktion ändert den Zeichensatz auf iso-8859-5 (Kyrillisch). Anschließend werden dynamisch Inhalte in das Dokumentfenster geschrieben. Der MS 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.
Der MS Internet Explorer akzeptiert den geänderten Zeichensatz oft erst nach dem Reload der Seite und einer erneuten Ausführung der Änderung.
|
|
cookieCookies (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 MS-Windows. Es wird eine Variable mit einem zugewiesenen Wert abgespeichert, zum Beispiel Datum und Uhrzeit des letzten Besuchs der WWW-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 MS Internet Explorer verwaltet die Cookies in einem Unterverzeichnis des Windows-Verzeichnisses.
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> |
Das Lesen eines Cookies funktioniert nach dem Schema x = document.cookie.
Das Schreiben eines Cookies funktioniert nach dem Schema document.cookie = x.
Das Beispiel frägt 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. also 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.
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> |
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 Ablaufsdatum gespeichert.
Dem Cookie wird schließlich das mit der Methode toGMTString() formatierte Datum übergeben.
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)
Im MS Internet Explorer ab Version 5 und im Netscape 6 können Sie mittels der Eigenschaft navigator.cookieEnabled abfragen, ob der Anwender Cookies aktiviert hat.
Opera 5.12 erlaubt kein Setzen von Cookies im Protokoll file.
|
|
defaultCharsetSpeichert den Zeichensatz, den der Anwender als Standard im Browser eingestellt hat. Wenn die Datei keine Meta-Angabe zum verwendeten Zeichensatz enthält, wird der Standard-Zeichensatz angenommen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
alert("Sie haben als Zeichensatz eingestellt: " + document.defaultCharset);
//-->
</script>
</head><body>
</body></html>
|
Das Beispiel gibt beim Einlesen der Datei mit alert() aus, welchen Zeichensatz der Anwender als Standardzeichensatz eingestellt hat.
|
|
fgColorSpeichert 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).
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> <!-- if(parent.frames[0].document.fgColor == "#000000") document.fgColor = "#FF0000"; //--> </script> </head><body> Ein kleiner Text </body></html> |
Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Frame-Sets befindet. Beim Einlesen der Datei wird geprüft, ob die Textfarbe eines anderen (des ersten) Frame-Fensters schwarz ist (if(parent.frames[0].document.fgColor == "#000000")). Wenn dies der Fall ist, wird die Textfarbe der aktuellen Datei auf rot gesetzt (document.fgColor = "#FF0000";). Beachten Sie, dass Farbänderungen für die Textfarbe in Netscape bis einschließlich Version 4 nur Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde. Ein gegebenenfalls im <body>-Tag gesetztes Attribut überschreibt die Farbzuweisung, falls diese zuvor im Dateikopf mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, 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.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen.
Opera 5.12 interpretiert diese Eigenschaft noch nicht.
|
|
lastModifiedSpeichert Datum und Uhrzeit der letzten Änderung der Datei, und zwar im internationalen Format nach GMT (Greenwhich-Zeit).
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>
|
Das Beispiel schreibt mit der Methode write() den Zeitpunkt der letzten Änderung dynamisch in die HTML-Datei.
Die Formatierung der Zeichenkette ist stark abhängig vom Browser und dem verwendeten Betriebssystem.
Berücksichtigen Sie insbesondere bei der Weiterverarbeitung dieser Eigenschaft mit dem Date-Objekt, dass einige Versionen des Netscape 4 eine zweistellige Jahreszahl an das Date-Objekt übergeben. Dies führt unter anderem dazu, dass ein falscher Wochentag und ein falsches Jahr zurückgegeben werden.
|
|
linkColorSpeichert die Farbe für 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).
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> <!-- document.linkColor = parent.frames[0].document.linkColor; //--> </script> </head><body> <a href="#">Ein Verweis</a> </body></html> |
Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Frame-Sets befindet. Beim Einlesen der Datei wird die Verweisfarbe der aktuellen Datei auf die gleiche Farbe gesetzt wie die Verweisfarbe der Datei, die sich in einem anderen (dem ersten) Frame-Fenster befindet.
Beachten Sie, dass Farbänderungen für die Verweisfarbe in Netscape bis einschließlich Version 4 nur Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde. Ein gegebenenfalls im <body>-Tag gesetztes Attribut überschreibt die Farbzuweisung, falls diese zuvor im Dateikopf mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, 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.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen.
Opera 5.12 interpretiert diese Eigenschaft noch nicht.
|
|
referrerSpeichert 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 MS 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://....
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>
|
Das Beispiel gibt im HTML-Text mit der Methode write() aus, von woher der Anwender die aktuelle Datei aufgerufen hat.
Opera 5.12 interpretiert diese Eigenschaft noch nicht.
|
|
titleSpeichert den Titel einer HTML-Datei, wie er bei <title>...</title> vergeben wurde.
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> |
Das Beispiel schreibt mit der Methode write() den Titel der HTML-Datei dynamisch als Inhalt in eine Überschrift 1. Ordnung (<h1>...</h1>).
Im MS Internet Explorer und im Netscape Navigator können Sie diese Eigenschaft auch ändern.
|
|
URLSpeichert den vollständigen URI des aktuellen Dokuments.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("Diese Datei: " + document.URL);
//-->
</script>
</body></html>
|
Das Beispiel schreibt mit der Methode write() die eigene vollständige Adresse in den Text. So etwas kann durchaus Sinn machen, beispielsweise, wenn die Datei Teil eines Frame-Sets ist. Anwender können sich dann auf die genaue Adresse beziehen, wenn Sie zu dem angezeigten Frame-Inhalt etwas mitteilen wollen.
|
|
vlinkColorSpeichert 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).
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> <script type="text/javascript"> <!-- document.vlinkColor = parent.frames[0].document.vlinkColor; //--> </script> </head><body> <a href="../document.htm">Verweis</a> </body></html> |
Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Frame-Sets befindet. Beim Einlesen der Datei wird die Farbe für Verweise zu besuchten Seiten in der aktuellen Datei auf die gleiche Farbe gesetzt wie bei der Datei, die sich in einem anderen (dem ersten) Frame-Fenster befindet.
Beachten Sie, dass Farbänderungen für die Verweisfarbe in Netscape bis einschließlich Version 4 nur Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde.
Ein gegebenenfalls im <body>-Tag gesetztes Attribut überschreibt die Farbzuweisung, falls diese zuvor im Dateikopf mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, 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.
Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen.
Opera 5.12 interpretiert diese Eigenschaft noch nicht.
|
|
captureEvents()Ü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).
|
|
close()Schließt einen Dokumentinhalt, der mit der open()-Methode geöffnet und mit den Methoden write() oder writeln() beschrieben wurde.
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> |
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.
|
|
createAttribute()Erzeugt ein neues Attribut für den Elementbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
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>
|
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 Elementbaum des Dokuments, noch hat es einen Wert. Das Attribut ist lediglich als Objekt erzeugt.
Die Methode createElement() 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 Elementbaum 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.
Mit dem Internet Explorer 5.5 war dieses Beispiel nicht nachvollziehbar, wenngleich Microsoft behauptet, diese Methode in den Internet Explorer implementiert zu haben. Im MS Internet Explorer 6.0beta ist das Beispiel dagegen nachvollziehbar.
|
|
createElement()Erzeugt ein neues Element für den Elementbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
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>
|
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 Elementbaum 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 Elementbaum 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 und ihr Text also als Kindelement dynamisch in den div-Bereich eingefügt.
|
|
createTextNode()Erzeugt einen neuen Textknoten für den Elementbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.
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>
|
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 Elementbaum 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.
|
|
getElementById()Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein id-Attribut besitzt.
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>
|
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.
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).
Vorraussetzung ist jedoch, dass die Variable auch existiert.
In Opera 5.12 kennt die Methode getElementById() zum Ansprechen von Elementen ebenfalls. Das obige Beispiel funktioniert jedoch in diesem Browser nicht.
|
|
getElementsByName()Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt.
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>
|
Im Beispiel wird eine Gruppe von Checkboxen definiert, die alle den gleichen Namen, nämlich Zutat, haben. Darunter ist ein Klickbutton 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.
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).
Vorraussetzung ist jedoch, dass die Variable auch existiert.
Opera 5.12 kennt diese Methode zum Ansprechen von Elementen ebenfalls.
|
|
getElementsByTagName()Greift entsprechend der XML-Variante des DOM auf ein beliebiges Element im Elementbaum 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.
Leider ist diese Methode vom DOM nicht in der HTML-Variante vorgesehen, doch mit den JavaScript-Interpretern der neueren Browser funktioniert sie trotzdem. Deshalb wird sie hier - anders als die übrigen Eigenschaften und Methoden des document-Objekt in der XML-Variante des DOM - beschrieben.
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>
|
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.
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 jedoch in diesem Browser nicht.
|
|
getSelection()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.
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>
|
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 MS 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.
|
|
handleEvent()Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.handleEvent() nur Ereignisse übergeben kann, die mit document.captureEvents() überwacht werden.
|
|
open()Ö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.
Kann ohne, mit einem oder mit zwei Parametern aufgerufen werden. Folgende Parameter sind möglich:
1. Mime-Type = Eine Bezeichnung des Mime-Types 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 write()- und writeln()-Befehlen 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-Befehl steht.
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>
|
Das Beispielscript 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.
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.
|
|
releaseEvents()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.
Netscape 6 interpretiert diese Methode nicht (mehr).
|
|
routeEvent()Ü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 Fenster-Ebene ansetzt, sondern auf Dokumentebene.
Netscape 6 interpretiert diese Methode nicht (mehr).
|
|
write()Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als Parameter.
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>
|
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.
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 Scriptbereich als eigenständiger Block interpretiert, und das aktuelle Script wird unabhängig davon weiter ausgeführt.
|
|
writeln()Wie write() - fügt jedoch am Ende automatisch ein Zeilenumbruchzeichen ein. Dadurch ist diese Methode vor allem zum Schreiben von Inhalten interessant, bei denen Zeilenumbrüche wichtig sind.
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>
|
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 Leerzeichens sichtbar, getreu der HTML-Regel, dass Zeilenumbrüche in Leerzeichen umgewandelt werden.
|
| |
 |
HTML-Elementobjekte
|
 |
frames
|
| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
© 2001 
selfhtml@teamone.de