/* 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; } } /* 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.
. Übergeben Sie "name", wenn das Element, auf das Sie zugreifen wollen, kein id-Attribut, aber dafür ein name-Attribut hat, z.B. . Ü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:

der Text

Dann liefert der Funktionsaufruf getContent("id", "Absatz") den Wert der Text zurück. Wenn aber notiert ist:

der Text

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. */ //var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0; //function DHTML_init() { //if (window.opera) { // OP = 1; //} //if(document.getElementById) { //DHTML = 1; //DOM = 1; //} //if(document.all && !OP) { // DHTML = 1; // MS = 1; //} //if(document.layers && !OP) { // DHTML = 1; // NS = 1; // } //} //DHTML_init();