SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis
Allgemeine DHTML-Bibliothek
Hinweise zu diesem Beispiel
Quelltext mit Erläuterungen
Test der DHTML-Bibliothek
DHTML-Bibliothek erweitern
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äuterungenDer 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.
/* 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;
if (DOM) {
if (Mode.toLowerCase() == "id") {
if (typeof document.getElementById(Identifier) == "object") {
Element = document.getElementById(Identifier);
} else {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "name") {
var ElementList = document.getElementsByName(Identifier);
if (typeof ElementList == "object" || (OP && typeof ElementList == "function")) {
Element = ElementList[ElementNumber];
} else {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
var ElementList = document.getElementsByTagName(Identifier);
if (typeof ElementList == "object" || (OP && typeof ElementList == "function")) {
Element = ElementList[ElementNumber];
} else {
Element = false;
}
return Element;
}
return null;
}
if (MSIE4) {
if (Mode.toLowerCase() == "id") {
if (typeof document.all[Identifier] == "object") {
Element = document.all[Identifier];
} else {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
if (typeof document.all.tags(Identifier) == "object") {
Element = document.all.tags(Identifier)[ElementNumber];
} else {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "name") {
if (typeof document[Identifier] == "object") {
Element = document[Identifier];
} else {
Element = false;
}
return Element;
}
return false;
}
if (NS4) {
if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
if (typeof document[Identifier] == "object") {
Element = document[Identifier];
} else {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "index") {
if (typeof document.layers[Identifier] == "object") {
Element = document.layers[Identifier];
} else {
Element = false;
}
return Element;
}
return false;
}
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 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) {
if (typeof Element[ElementNumber] == "object") {
Attribute = Element[ElementNumber][AttributeName];
} else {
Attribute = Element[AttributeName]
}
return Attribute;
}
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.
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.
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.
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.
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.
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.
getElement() - Elementobjekt ermitteln:Beispielaufrufe:
Elementobjekt = getElement("id", "Hinweis");
Elementobjekt = getElement("name", "Eingabefeld", 0);
Elementobjekt = getElement("tagname", "p", 8);
Layer-Objekt = getElement("index", 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 (nur im Zusammenhang mit layer- oder div-Elementen) auch mit Netscape 4.x.
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 "index". Ü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 "index" 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 "index" ü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 mit dem typeof-Operator geprüft, ob das gewünschte Element überhaupt existiert und ob dieses ein Objekt darstellt. Tritt dieser Fall ein, wird das Element erzeugt und zurückgegeben. Andernfalls wird false zurückgegeben.
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 "index" 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.
getAttribute() - Attributinhalt ermitteln:Beispielaufrufe:
Attribut = getAttribute("name", "Bildname", 0, "height");
Attribut = getAttribute("id", "Bereich", null, "id");
if (!NS4) Attribut = getAttribute("name", "Anker", 0, "href")
if (NS4) Attribut = getAttribute("name", "links", 0, "href")
Über diese Funktion, die ihrerseits auf die Funktion getElement() zurückgreift, können Sie auf bequeme Weise den Wert eines Attributs in einem Element ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. Für einige Objekte ist es auch im Netscape 4 möglich. 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 Wort 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. Bei diesem Browser ist es in einigen Fällen nur möglich, über Unterobjekte auf die gewünschte Eigenschaft zuzugreifen, z.B. bei Verweisen und Ankern. Sie können darauf zugreifen, indem Sie im Parameter Identifier den Namen des Unterobjektes (z.B. "links" oder "elements") und im Parameter ElementNumber den Namen bzw. die Indexnummer des Objektes notieren.
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.
setContent() - Elementinhalt neu 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("index", "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 Wort 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.
Safari 1.2 hat das Problem, dass Funktionen der DHTML-Bibliothek, bei denen der erste Parameter Mode die Werte "name" oder "tagname" hat, immer den Wert false zurückgeben. Das Problem liegt an der Überprüfung auf die Typen der Elementliste im DOM-Teil der Funktion getElement(). Unter Safari ist eine Elementliste vom Typ function, durch den gleichzeitigen Test der Variable OP darauf, ob das Skript unter einem Opera-Browser läuft, wird immer der Wert false zurückgegeben. Das Problem könnte gelöst werden, wenn nur auf den Typ function getestet wird, allerdings könnte das eventuell zu ungewünschten Effekten in anderen Browsern führen.
| |
Test der DHTML-BibliothekDas 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.
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", null);
if (p_Inhalt) {
Ausgabetext += "Inhalt des p-Elements: " + p_Inhalt + "!\n";
} else {
Ausgabetext += "Inhalt des p-Elements konnte nicht ermittelt werden!\n";
}
if (NS4) {
Verweis = getAttribute("name", "anchors", "Anker", "text");
} else {
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 + "px.\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"> </div>
</body>
</html>
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. Da auch mit Netscape 4 auf den Text eines Verweises zugriffen werden kann, wird für diesen Browser nicht die Funktion getContent() aufgerufen, sondern getAttribute(). Berücksichtigt wurde zudem, dass sobald ein Verweis gleichzeitig ein Anker ist, der Verweistext nur über das Anchorobjekt ausgelesen werden kann.
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.
Safari 1.2 kann wegen des oben aufgeführten Problems auf einige Inhalte nicht zugreifen. Dies betrifft alle Fälle, in dem die Funktion getContent mit den Modi name oder tagname aufgerufen wird.
| |
Die hier vorgestellte DHTML-Bibliothek leistet nur einige wenige Grundfunktionen, erleichtert den Zugriff auf Elemente etwas und macht in vielen Fällen den JavaScriptCode 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)
|
| SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis |
|
© 2005 Impressum