SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Allgemeine DHTML-Bibliothek
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie eine Funktionsbibliothek als externes JavaScript erstellen können, die DHTML erleichtert.
Keywords: SELFHTML, Dynamisches HTML, Dynamic HTML, DHTML, Document Object Model, DOM, Bibliotheksfunktionen, DHTML-Bibliothek
Date: 2005-09-20T06:08:05+02:00

| # Allgemeine DHTML-Bibliothek
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Test der DHTML-Bibliothek DHTML-Bibliothek erweitern

## Hinweise zu diesem Beispiel

Angesichts der vielen verschiedenen DHTML-Modelle, die derzeit noch kursieren, ist es für Programmierer oft nicht einfach, sich die ganzen unterschiedlichen Befehle und Zugriffsmöglichkeiten zu merken. Außerdem werden Dateien bei größeren Scripts ganz schön stark aufgebläht, wenn man immer wieder die gleichen Browser-Abfragen und Konstrukte für den Elementzugriff notiert. Besser ist es deshalb, einmal eine Bibliothek an allgemein geschriebenen DHTML-Funktionen zu schreiben, diese in eine externe JavaScript-Datei auszulagern, und die JavaScript-Datei dann in denjenigen Dateien mit einzubinden, wo der Code der DHTML-Funktionen benötigt wird.

Das Beispiel auf dieser Seite stellt eine solche Bibliothek für DHTML-Funktionen vor. Die einzelnen Funktionen werden dabei auch genau erklärt. In den anderen Beispielen in diesem Kapitel kommt die hier erstellte Bibliothek dann zum praktischen Einsatz.

Selbstverständlich können Sie die Funktionsbibliothek für Ihre Zwecke beliebig erweitern. So ist es z.B. denkbar, allgemein geschriebene Funktionen zur CSS-Formatierung oder -Positionierung von Elementen hinzuzufügen. Der hier vorgestellte Grundstock an Funktionen soll vor allem den Zugriff auf Elemente erleichtern und Browser-Abfragen reduzieren.

## Quelltext mit Erläuterungen

Der folgende Quelltext zeigt die vollständige DHTML-Bibliothek. Kopieren Sie sich den vollständigen Quelltext und speichern Sie ihn in einer Textdatei mit dem Namen dhtml.js. Dann haben Sie die externe JavaScript-Datei mit den DHTML-Funktionen.

### Beispiel - Datei dhtml.js:

    /* DHTML-Bibliothek */

    var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;

    if (document.getElementById) {
      DHTML = true;
      DOM = true;
    } else {
      if (document.all) {
        DHTML = true;
        MSIE4 = true;
      } else {
        if (document.layers) {
          DHTML = true;
          NS4 = true;
        }
      }
    }
    if (window.opera) {
      OP = true;
    }

    function getElement (Mode, Identifier, ElementNumber) {
      var Element, ElementList;
      if (DOM) {
        if (Mode.toLowerCase() == "id") {
          Element = document.getElementById(Identifier);
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "name") {
          ElementList = document.getElementsByName(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "tagname") {
          ElementList = document.getElementsByTagName(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      if (MSIE4) {
        if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
          Element = document.all(Identifier);
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "tagname") {
          ElementList = document.all.tags(Identifier);
          Element = ElementList[ElementNumber];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      if (NS4) {
        if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
          Element = document[Identifier];
          if (!Element) {
            Element = document.anchors[Identifier];
          }
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        if (Mode.toLowerCase() == "layerindex") {
          Element = document.layers[Identifier];
          if (!Element) {
            Element = false;
          }
          return Element;
        }
        return false;
      }
      return false;
    }

    function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
      var Attribute;
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM || MSIE4) {
        Attribute = Element.getAttribute(AttributeName);
        return Attribute;
      }
      if (NS4) {
        Attribute = Element[AttributeName]
        if (!Attribute) {
           Attribute = false;
        }
        return Attribute;
      }
      return false;
    }

    function getContent (Mode, Identifier, ElementNumber) {
      var Content;
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM && Element.firstChild) {
        if (Element.firstChild.nodeType == 3) {
          Content = Element.firstChild.nodeValue;
        } else {
          Content = "";
        }
        return Content;
      }
      if (MSIE4) {
        Content = Element.innerText;
        return Content;
      }
      return false;
    }

    function setContent (Mode, Identifier, ElementNumber, Text) {
      var Element = getElement(Mode, Identifier, ElementNumber);
      if (!Element) {
        return false;
      }
      if (DOM && Element.firstChild) {
        Element.firstChild.nodeValue = Text;
        return true;
      }
      if (MSIE4) {
        Element.innerText = Text;
        return true;
      }
      if (NS4) {
        Element.document.open();
        Element.document.write(Text);
        Element.document.close();
        return true;
      }
    }

### Erläuterung:

Die externe JavaScript-Datei darf nichts anderes als JavaScript-Code enthalten, so wie im Beispiel gezeigt. Im Folgenden werden die globalen Variablen und die Funktionen beschrieben. Denn mit diesen Variablen und Funktionen können Sie arbeiten, wenn Sie die Bibliothek verwenden wollen.

In den globalen Variablen wird gespeichert, welche DHTML-Fähigkeiten der Browser unterstützt. Sie werden direkt am Anfang der Bibliothek automatisch mit ihren Werten versorgt und sollten anschließend nicht mehr geändert werden. Die Wirkungsweise der übrigen Funktionen ist davon abhängig, dass die globalen Variablen mit korrekten Werten versorgt sind.

Um in Erfahrung zu bringen, welches DHTML-Modell verwendet werden muss, wird abgefragt, ob bestimmte Objekte existieren.
Zum Testen auf DOM-Verfügbarkeit eignet sich die Frage, ob document.getElementById existiert, denn das ist eine wichtige DOM-Methode, die in allen DOM-Implementierungen existieren sollte. Beachten Sie, dass manche Browser zwar `document.getElementById` kennen, aber andere Teile des umfangreichen DOM nicht unterstützen. Wenn Sie spezielle DOM-Techniken verwenden, sollten Sie jeweils im Einzelfall überprüfen, ob die benötigten Objekte zur Verfügung stehen.
Zum Testen auf die ältere Microsoft- und Netscape-Syntax wird auf deren zentrale DHTML-Objekte hin abgefragt. Wenn `document.all` verfügbar ist, ist Syntax nach dem älteren Microsoft-Modell angesagt. Wenn `document.layers` verfügbar ist, Syntax nach dem älteren Netscape-Modell.
Zum Schluss wird über `window.opera` abgefragt, ob es sich um einen Opera-Browser handelt. Dies ist zur Bestimmung des verwendeten DHTML-Modells nicht nötig, aber Opera bedarf an einigen Stellen der Funktionen der Bibliothek einer Sonderbehandlung.

#### Globale Variable `DHTML`:

Diese Variable speichert, ob Dynamisches HTML bei dem vom Anwender eingesetzten Browser verfügbar ist oder nicht. Wenn Dynamisches HTML nach irgendeinem der bekannten DHTML-Modelle verfügbar ist, dann erhält sie den Wert `true` (wahr), wenn nicht, dann den Wert `false` (unwahr). Mit der simplen Abfrage `if (DHTML)` können Sie dann im Verlauf eines eigenen Scripts überprüfen, ob überhaupt Dynamisches HTML möglich ist.

#### Globale Variable `DOM`:

Diese Variable speichert, ob Dynamisches HTML nach DOM-Syntax möglich ist oder nicht (Wert `true` oder Wert `false`). Mit `if (DOM)` können Sie abfragen, ob ein neuerer Browser am Werk ist, der das DOM in seiner JavaScript-Implementierung unterstützt.

#### Globale Variable `MSIE4`:

Wenn der Wert der Variable `MSIE4` gleich `true` ist, dann läuft Ihr Script mit auf einem Internet Explorer der 4er-Generation. Mit `if (MSIE4)` können Sie also in Ihrem Script abfragen, ob mit dem DHTML-Modell des Internet Explorer 4.x gearbeitet werden muss.

#### Globale Variable `NS4`:

Wenn diese Variable den Wert `true` besitzt, dann läuft Ihr Script mit auf einem Netscape-Browser der 4er-Generation. Wenn ein 6er-Netscape oder ein anderer Abkömmling des Mozilla-Browsers eingesetzt wird, ist stattdessen die Variable `DOM` gleich `true`, während `NS4` gleich `false` ist. Mit `if (NS4)` können Sie also in Ihrem Script abfragen, ob mit der DHTML-Syntax des alten 4er-Netscape gearbeitet werden muss.

#### Globale Variable `OP`:

Wenn die Variable `OP` den Wert `true` hat, dann läuft Ihr Script auf einem Opera-Browser. Mit `if (OP)` können Sie also in Ihrem Script abfragen, ob ein Opera-Browser am Werk ist. Handelt es sich um einen neueren Opera-Browser, ist in den Variablen `DOM` der Wert `true` gespeichert.

#### Funktion `getElement()` - Elementobjekt ermitteln:

Beispielaufrufe:

    Elementobjekt = getElement("id", "Hinweis");
    Elementobjekt = getElement("name", "Eingabefeld", 0);
    Elementobjekt = getElement("tagname", "p", 8);
    if (NS4) Layerobjekt = getElement("layerindex", 2);

Diese Funktion ist eigentlich die zentrale Funktion der hier vorgestellten Bibliothek. Sie greift auf ein bestimmtes Element im Dokument zu und gibt das Objekt dieses Elements zurück. Das funktioniert mit DOM-fähigen Browsern ebenso wie mit dem älteren Internet Explorer 4.x und in eingeschränkter Form auch mit Netscape 4.x: Sie können in diesem Browser auf Layer und simulierte Layer über deren Namen, ID oder Indexnummer zugreifen sowie auf Grafiken, Links bzw. Anker, Java-Applets und Formulare über deren Namen.

In den meisten Fällen müssen Sie diese Funktion nicht selber aufrufen. Es handelt sich vielmehr um eine Basisfunktion, die von den übrigen Funktionen der Bibliothek benutzt wird. Dennoch gibt es auch Fälle, in denen ein Direktaufruf dieser Funktion einen Sinn hat. Die Funktion erwartet folgende Parameter:

`Mode` ist die Art und Weise, wie auf ein Element zugegriffen werden soll. Es gibt vier erlaubte Werte für diesen Parameter: `"id"`, `"name"`, `"tagname"` und `"layerindex"`. Übergeben Sie `"id"`, wenn Sie auf ein Element zugreifen wollen, das ein `id`-Attribut hat, z.B. `<div id="Bereich">`. Übergeben Sie `"name"`, wenn das Element, auf das Sie zugreifen wollen, kein `id`-Attribut, aber dafür ein `name`-Attribut hat, z.B. `<a name="Anker">`. Übergeben Sie `"tagname"`, wenn das Element, auf das Sie zugreifen wollen, weder ein `id`- noch ein `name`-Attribut hat. Übergeben Sie `"layerindex"` nur dann, wenn es sich um Netscape-Layer handelt, die über das `layers`-Objekt mit Hilfe von Indexnummern angesprochen werden sollen.

`Identifier` ist die nähere Angabe zu dem, was Sie bei `Mode` festgelegt haben: Wenn Sie bei `Mode` den Wert `"id"` übergeben, dann erwartet die Funktion bei `Identifier` den Wert des `id`-Attributs. Wenn Sie bei `Mode` den Wert `"name"` übergeben, dann erwartet `Identifier` den Wert des `name`-Attributs. Wenn Sie bei `Mode` den Wert `tagname` übergeben haben, dann erwartet `Identifier` den gewünschten Elementnamen, also z.B. `"h1"` oder `"div"`. Wenn Sie bei `Mode` den Wert `"layerindex"` übergeben haben, erwartet `Identifier` die Indexnummer für den gewünschten Netscape-Layer.

`ElementNumber` wird nur dann benötigt, wenn bei `Mode` einer der beiden Werte `"name"` oder `"tagname"` angegeben wurde. In diesem Fall müssen Sie bei `ElementNumber` eine Indexnummer angeben, mit der Sie festlegen, das wievielte Element im Dokument mit dem entsprechenden Namen oder Elementnamen Sie meinen. Das erste Element hat die Indexnummer `0`, das zweite Nummer `1` usw.

Die Funktion `getElement()` geht der Reihe nach die möglichen DHTML-Modelle durch und fragt zuerst mit `if (DOM)` die globale Variable `DOM` daraufhin ab, ob DOM-Syntax verfügbar ist. Wenn ja, dann wird abhängig von den übergebenen Parametern das gewünschte Element nach DOM-Syntax ermittelt und zurückgegeben. Nur wenn keine DOM-Syntax verfügbar ist, wird versucht, die älteren DHTML-Modelle anzuwenden. Zunächst wird mit `if (MSIE4)` geprüft, ob das ältere DHTML-Modell von Microsoft verfügbar ist. Wenn ja, wird das Element nach dessen Syntax über das `document.all`-Objekt ermittelt. Wenn auch die Microsoft-Syntax nicht greift, bleibt noch die ältere Netscape-Syntax, die mit `if (NS4)` abgefragt wird. In diesem Fall wird aus den übergebenen Parametern der Zugriff auf ein Layer-Objekt konstruiert.

Gleichzeitig erfolgt in der Funktion eine Fehlerbehandlung. In jedem Zweig der Funktion wird jeweils geprüft, ob das gewünschte Element überhaupt existiert. Tritt dieser Fall ein, wird das Element zurückgegeben. Andernfalls wird `false` zurückgegeben.

#### Funktion `getAttribute()` - Attributwert ermitteln:

Beispielaufrufe:

    Attribut = getAttribute("name", "Bildname", 0, "height");
    Attribut = getAttribute("id", "Bereich", null, "id");
    if (!NS4) Attribut = getAttribute("name", "Anker", 0, "href");

Über diese Funktion, die ihrerseits auf die Funktion `getElement()` zurückgreift, können Sie auf bequeme Weise den Wert eines Attributs eines bestimmten Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. Neben den drei bereits bekannten ersten Parametern erwartet diese Funktion einen vierten Parameter `AttributeName`. Bei diesem müssen Sie den Namen des gewünschten Attributs übergeben. Wenn Sie den dritten Parameter `ElementNumber` nicht angeben, notieren Sie an dessen Stelle das Schlüsselwort `null`.

Die Funktion `getAttribute()` benutzt die Objektmethoden getAttribute(), die sowohl im DOM-Modell als auch im älteren Microsoft-Modell verfügbar sind. Bei Netscape 4 dagegen wird die gewünschte Eigenschaft direkt abgefragt.

Die Auswahl des richtigen Objekts übernimmt die Basisfunktion `getElement()`. Natürlich erfolgt auch in jedem Fall die Überprüfung, ob das gewünschte Objekt überhaupt existiert.

#### Funktion `getContent()` - Elementinhalt ermitteln:

Beispielaufrufe:

    if (!NS4) Elementinhalt = getContent("id", "Hinweis");
    if (!NS4) Elementinhalt = getContent("name", "Verweis", 3);
    if (!NS4) Elementinhalt = getContent("tagname", "p", 8);

Über diese Funktion können Sie auf bequeme Weise den Inhalt eines Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. `getContent()` bedient sich der Basisfunktion `getElement()` und reicht ihre drei übergebenen Parameter einfach an jene durch. Bei DOM-Syntax versucht sie, an den Textinhalt des Elements mit `firstChild.nodeValue` zu kommen, bei Microsoft-Syntax über die Eigenschaft `innerText` des `all`-Objekts.

Das ältere Netscape-Modell kennt kein Auslesen von Elementinhalten. In den Beispielaufrufen ist der Funktionsaufruf deshalb davon abhängig gemacht, dass nicht nach älterer Netscape-Syntax gearbeitet wird (`if (!NS4)`). Sie können diese Funktion zwar auch im Netscape 4 ausführen, sie wird aber immer `false` anstelle des gewüschten Elementinhalts zurückgeben.

Beachten Sie, dass die Funktion `getContent()` bei Verwendung des DOM-Modells eine leere Zeichenkette zurückliefert, wenn der erste Kindknoten des Elements kein Text ist, sondern ein weiteres Element. Wenn also beispielsweise notiert ist:
`<p id="Absatz">der Text</p>`
Dann liefert der Funktionsaufruf `getContent("id", "Absatz")` den Wert `der Text` zurück. Wenn aber notiert ist:
`<p id="Absatz"><b>der Text</b></p>`
Dann liefert der Funktionsaufruf bei Anwendung des DOM-Modells eine leere Zeichenkette zurück, da es keinen Text als Elementinhalt von `p` gibt, sondern der Inhalt ein anderes Element, nämlich ein `b`-Element ist.
Die Parameter sind bei `getContent()` die gleichen wie bei `getElement()`. Nur der Wert `"layerindex"` beim Parameter `Mode` wird von dieser Funktion nicht verarbeitet, da sich dieser auf Netscape-spezifisches Verhalten bezieht.

Die Funktion `getContent()` kümmert sich auch um ältere Browser, die Inhalte nicht dynamisch lesen können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu lesen, fragt sie ab, ob das gewünschte Objekt existiert und ob auch das Objekt firstChild vorhanden ist. Erst wenn diese Bedingung erfüllt ist, wird versucht den Inhalt zu lesen. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

#### Funktion `setContent()` - Elementinhalt dynamisch ändern:

Beispielaufrufe:
`setContent("id", "Hinweis", null, "neuer Hinweistext");`
`setContent("name", "Verweis", 3, "neuer Verweistext");`
`setContent("tagname", "p", 8, "neuer Textinhalt des Elements");`
`if (NS4) setContent("layerindex", 2, null, "neuer Inhalt des Layers");`

Mit dieser Funktion können Sie den Inhalt eines Elements dynamisch ändern. Die Funktion `setContent()` bedient sich für den Zugriff auf das gewünschte Element der Basisfunktion `getElement()`. Die ersten drei Parameter, die bei denen der übrigen Funktionen gleichen, werden dazu an `getElement()` weitergereicht. Als vierten Parameter `Text` erwartet die Funktion `setContent()` den gewünschten Textinhalt. Beachten Sie, dass dieser Text zumindest beim DOM-Modell und beim älteren Microsoft-Modell nur als reiner Text interpretiert wird. HTML-Formatierungen im Text werden dabei als Klartext interpretiert.
Übergeben Sie bei Parametern, für die Sie keinen Wert angeben, das Schlüsselwort `null`.
Bei Netscape-Layern benutzt die Funktion `setContent()` automatisch die üblichen Befehle zum Öffnen des Layer-Dokuments (`document.Layer.document.open()`), zum Schreiben (`document.Layer.document.write()`) und zum Schließen (`document.Layer.document.close()`).

Die Funktion `setContent()` kümmert sich auch um ältere Browser, die Inhalte noch nicht dynamisch ändern können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu ändern, fragt sie daher ab, ob das gewünschte Objekt existiert und ob auch das Objekt firstChild existiert. Erst wenn diese Bedingung erfüllt ist, versucht sie den Inhalt zu ändern. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

## Test der DHTML-Bibliothek

Das folgende Beispiel zeigt, wie Sie die DHTML-Bibliothek verwenden können. Die einzelnen Funktionen werden in dieser Beispieldatei mit konkreten Beispielen aufgerufen. Am besten können Sie die Funktionsweise testen, wenn Sie das Anzeigebeispiel mal mit verschiedenen Browsern aufrufen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript" src="dhtml.js"></script>
    <script type="text/javascript">
    function Testen() {
      var Ausgabetext = "";
      if (DHTML) {
        Ausgabetext += "DHTML ist aktiviert!\n"
      } else {
        Ausgabetext += "DHTML ist nicht aktiviert!\n";
      }
      if (DOM) {
        Ausgabetext += "DOM wird unterstützt!\n";
      } else {
        Ausgabetext += "DOM wird nicht unterstützt!\n";
      }
      if (MSIE4)
        Ausgabetext += "Alte Microsoft-Technologie ohne DOM!\n";
      if (NS4)
        Ausgabetext += "Alte Netscape-Technologie ohne DOM!\n";

      var h1_Inhalt = getContent("tagname", "h1", 0);
      if (h1_Inhalt) {
        Ausgabetext += "Inhalt des h1-Elements: " + h1_Inhalt + "\n";
      } else {
        Ausgabetext += "Inhalt des h1-Elements konnte nicht ermittelt werden!\n";
      }

      var p_Inhalt = getContent("id", "Hinweisabsatz");
      if (p_Inhalt) {
        Ausgabetext += "Inhalt des p-Elements: " + p_Inhalt + "\n";
      } else {
        Ausgabetext += "Inhalt des p-Elements konnte nicht ermittelt werden!\n";
      }

      var Verweis = getContent("name", "Anker", 0);
      if (Verweis) {
        Ausgabetext += "Verweistext: " + Verweis + "\n";
      } else {
        Ausgabetext += "Verweistext konnte nicht ermittelt werden!\n";
      }

      var h1_align = getAttribute("tagname", "h1", 0, "align");
      if (h1_align) {
        Ausgabetext += "Ausrichtung des h1-Elements: " + h1_align + "\n";
      } else {
        Ausgabetext += "Ausrichtung des h1-Elements konnte nicht ermittelt werden!\n";
      }

      var Bild_Hoehe= getAttribute("name", "auge", 0, "height");
      if (Bild_Hoehe) {
        Ausgabetext += "Bildhöhe: " + Bild_Hoehe + " Pixel\n";
      } else {
        Ausgabetext += "Die Bildhöhe konnte nicht ermittelt werden!\n";
      }

      var Bereich_id = getAttribute("id", "Bereich", null, "id");
      if (Bereich_id) {
        Ausgabetext += "id-Name des Bereichs: " + Bereich_id + "\n";
      } else {
        Ausgabetext += "id-Name des Bereichs konnte nicht ermittelt werden!\n";
      }

      setContent("id", "Bereich", null, "Tests sind fertig!");

      alert(Ausgabetext);
    }
    </script>
    <style type="text/css">
    #Bereich { position:absolute; top:200px; left:10px; width:500px; height:100px; }
    </style>
    </head><body>
    <h1 align="left">Test der dhtml.js</h1>
    <hr noshade="noshade" size="1">
    <p id="Hinweisabsatz">Die Tests testen die Funktionen der DHTML-Bibliothek</p>
    <p><img name="auge" src="../../../src/auge.gif" width="24" height="16" border="0" alt="Testbild">
    <a name="Anker" href="javascript:Testen()">Test starten</a></p>
    <div id="Bereich">&nbsp;</div>
    </body>
    </html>

### Erläuterung:

Das Beispiel enthält im sichtbaren Bereich der HTML-Datei eine Überschrift erster Ordnung, einen Textabsatz, einen weiteren Textabsatz mit einem Verweis, vor dem außerdem eine Grafik eingebunden ist, und schließlich einen `div`-Bereich, der mit Hilfe von CSS absolut positioniert ist. Die entsprechenden CSS-Angaben zur Positionierung stehen im Dateikopf in einem `style`-Bereich, wo die Formate für `#Bereich` notiert sind. Generell ist es wegen einiger Schwächen von Netscape 4.x besser, die CSS-Formatierungen der simulierten Layer in einem zentralen Stylesheet gleich im Dateikopf zu notieren und nicht im einleitenden `<div>`-Tag.

Im Dateikopf sind ferner zwei JavaScript-Bereiche definiert. Der erste ist leer und bindet lediglich die DHTML-Bibliothek ein, die in der externen JavaScript-Datei `dhtml.js` gespeichert ist. Der zweite Script-Bereich enthält den JavaScript-Code, der die Testaufrufe durchführt.

Das JavaScript innerhalb des Dateikopfes wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der Datei notiert ist. Dann wird die Funktion `Testen()` aufgerufen. Diese Funktion wie auch das gesamte JavaScript kann ohne weitere Umwege auf alle globalen Variablen und die Funktionen der DHTML-Bibliothek zugreifen.

Zunächst greift die Funktion `Testen()` auf die initialisierten globalen Variablen der DHTML-Bibliothek zu und prüft, welches DHTML-Modell verfügbar ist. Abhängig davon, was verfügbar ist, wird die Variable `Ausgabetext` um einen Text erweitert.

Als nächstes wird mit der Funktion `getContent()` aus der DHTML-Bibliothek gespielt.
Mit `getContent("tagname", "h1", 0)` wird via Elementname auf das erste `h1`-Element (Indexzähler 0) zugegriffen. Der Rückgabewert von `getContent()` wird in der Variablen `h1_Inhalt` gespeichert. Abhängig davon, ob diese nach dem Funktionsaufruf eine Zeichenkette mit einer Länge größer 0 enthält (`if (h1_Inhalt)`), wird die Variable `Ausgabetext` wieder um einen weiteren Text erweitert.

Zwei weitere Aufrufe von `getContent()` folgen, die andere Varianten der Parameterversorgung ausprobieren.
Mit `getContent("id", "Hinweisabsatz")` wird auf das Element mit dem Attribut `id="Hinweisabsatz"` zugegriffen.
Mit `getContent("name", "Anker", 0)` wird auf das erste Element im Dokument zugegriffen, bei dem das Attribut `name="Anker"` notiert ist.

Daran anschließend probiert die Funktion `Testen()` die Bibliotheksfunktion `getAttribute()` mit drei Aufrufen aus, einmal über den Elementnamen, einmal über den Tagnamen und einmal über das `id`-Attribut.

Schließlich wird auch noch `setContent()` aufgerufen. Damit es in allen Browsern inklusive Netscape 4.x funktioniert, wird der Inhalt des absolut positionierten `div`-Bereichs neu gesetzt, den Netscape als Layer erkennt.

Am Ende gibt die Funktion `Testen()` die gesammelten Einzelergebnisse, die sie in der Variablen `Ausgabetext` zusammengetragen hat, in einem Meldungsfenster aus.

### Beachten Sie:

Die DHTML-Bibliothek deckt der Einfachheit halber nicht alle Zugriffsmöglichkeiten ab, die Netscape 4 bietet. Obwohl die Funktion `getContent()` im Netscape 4 beim Auslesen des Verweistextes scheitert, ist das Auslesen über `document.anchors.Anker.text` möglich. Auch das Ansprechen von gewissen Elementen - den besagten Grafiken, Java-Applets und Formularen - über deren Indexnummer ist über die DHTML-Bibliothek nur durch umständlich möglich. Wenn Sie ein Element über dessen Tag-Namen ansprechen wollen, können Sie für neuere Browser beim Parameter `Mode` den Wert `"tagname"` wählen. Im Netscape 4 können Sie stattdessen die Objekte document.links bzw. document.anchors für `a`-Elemente, document.applets für `applet`-Elemente, document.forms für `form`-Elemente und document.images für `img`-Elemente verwenden.

## DHTML-Bibliothek erweitern

Die hier vorgestellte DHTML-Bibliothek leistet nur einige wenige Grundfunktionen, erleichtert den Zugriff auf Elemente etwas und macht in vielen Fällen den JavaScript-Code etwas übersichtlicher und besser lesbar. Es gibt aber noch vieles, was sie nicht leistet. Wenn Sie häufig mit Dynamischem HTML arbeiten, empfiehlt es sich, wenn Sie die DHTML-Bibliothek um eigene, andere Funktionen erweitern. Wichtig ist bei so einer Funktionsbibliothek, dass alle Funktionen allgemein geschrieben sind. Deshalb erwarten die Funktionen in der Regel mehrere Parameter, um ihren Input für die zu verarbeitenden Daten zu erhalten.

Denkbar wären beispielsweise noch Funktionen, die direkt auf CSS-Eigenschaften von Elementen zugreifen, oder Funktionen, die in der Lage sind, ein Element dynamisch neu zu positionieren. Ausgehend davon sind auch Funktionen möglich, die bestimmte Bewegungsabläufe wie Kreisbahnen usw. berechnen und Elemente entsprechend positionieren. Andere denkbare Funktionen könnten sich dem leider noch ziemlich komplizierten, weil sehr unterschiedlich implementierten Event-Handling widmen und dort einiges vereinfachen.

Eine Funktionsbibliothek sollte andererseits jedoch nicht zu groß werden. Denn wenn Sie am Ende zig Kilobyte externes JavaScript einbinden, um drei triviale Anweisungen zu notieren, dann ist eine Funktionsbibliothek nicht angemessen. In solchen Fällen ist es besser, die paar Befehle ohne Zuhilfenahme einer Funktionsbibliothek zu notieren.

Achten Sie stets darauf, dass Ihre Bibliotheken eine Fehlerhandlung durchführen und jeweils die Verfügbarkeit der angesprochenen Objekte überprüft.

| Dynamische Navigationsleiste
| Dynamische Filter (nur Microsoft)

© 2007 Impressum