SELFHTML: JavaScript / Objektreferenz / document
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Aufgaben, Eigenschaften und Methoden das window-Objekt in JavaScript hat.
Keywords: SELFHTML, JavaScript, Objekte, document, alinkColor, bgColor, charset, cookie, defaultCharset, domain, fgColor, lastModified, linkColor, referrer, title, URL, vlinkColor, captureEvents, close, getElementById, getElementsByName, getSelection, handleEvent, open, releaseEvents, routeEvent, write, writeln
Date: 2005-11-16T01:48:05+01:00

| # document
| document: Allgemeines zur Verwendung ### Eigenschaften: alinkColor (Farbe für Verweise beim Anklicken) bgColor (Hintergrundfarbe) charset (verwendete Zeichenkodierung) cookie (beim Anwender speicherbare Zeichenkette) defaultCharset (voreingestellte Zeichenkodierung) fgColor (Farbe für Text) lastModified (letzte Änderung am Dokument) linkColor (Farbe für Verweise) referrer (zuvor besuchte Seite) title (Titel der Datei) URL (URL-Adresse der Datei) vlinkColor (Farbe für Verweise zu besuchten Zielen) ### Methoden: captureEvents() (Ereignisse überwachen) close() (schließen) createAttribute() (Attributknoten erzeugen) createElement() (Elementknoten erzeugen) createTextNode() (Textknoten erzeugen) getElementById() (HTML-Elementzugriff über id-Attribut) getElementsByName() (HTML-Elementzugriff über name-Attribut) getElementsByTagName() (HTML-Elementzugriff über Elementliste) getSelection() (selektierter Text) handleEvent() (Ereignisse verarbeiten) open() (Dokument öffnen) releaseEvents() (Ereignisse abschließen) routeEvent() (Event-Handler-Hierarchie durchlaufen) write() (ins Dokumentfenster schreiben) writeln() (zeilenweise schreiben) ### Unterobjekte: HTML-Elemente node all anchors applets forms images layers links

## document: Allgemeines zur Verwendung

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.

## alinkColor

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.

## bgColor

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 &auml;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.

## charset

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.

## cookie

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.

## defaultCharset

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.

## fgColor

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 &auml;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.

## lastModified

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.

## linkColor

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 &auml;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`.

## referrer

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.

## title

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.

## URL

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).

## vlinkColor

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`.

## 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).

### Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

## close()

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.

## createAttribute()

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.

## createElement()

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.

## createTextNode()

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.

## getElementById()

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.

## getElementsByName()

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.

## getElementsByTagName()

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.

## 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.

### 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.

## handleEvent()

Ü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.

## 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.

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.

## 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.

### Beachten Sie:

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 Fensterebene ansetzt, sondern auf Dokumentebene.

### Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

## write()

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.

## writeln()

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.

| HTML-Elementobjekte
| frames

© 2007 Impressum