Hin und wieder wird uns die Frage gestellt, was denn DHTML sei. Wir möchten hiermit diese Frage kurz beantworten.

DHTML ist keine eigene Sprache, sondern eine Kombination dreier Technologien, die mittels des DOM (Document Object Model) ineinandergreifen.

1. HTML - Eine Auszeichnungssprache, die dazu dient, dem Browser mitzuteilen, wie er ein Dokument darzustellen hat.

2. CSS - Style Sheets für weiterführende Formatierungen von Text und HTML sowie weitere Features wie Postionierung und "Layering" von Dokument- Inhalten.

3. JavaScript - Die Programmiersprache, die es Ihnen erlaubt, auf Eigenschaften von HTML und CSS dynamisch zuzugreifen und zu kontrollieren..

JavaScript greift über das Document Object Model (DOM) auf ein HTML- Dokument zu. Aufgabe des DOM ist es, JavaScript alle Attribute von HTML und Style Sheets zugänglich zu machen. Alles, was Sie über DOM wissen müssen ist, welche JavaScript- Befehle es akzeptiert. Das ist zugegebenermassen nicht so einfach, wie es sich liest, da die verschiedenen Browser etwas unterschiedliche Versionen oder Auslegungen des DOM verwenden, so dass sie zum Teil unterschiedlich auf HTML- Eigenschaften zugreifen und diese auch unterschiedlich darstellen.

Und wie funktioniert das Ganze? Wie greifen Sie auf ein HTML- Element in einer Seite zu und wie ändern Sie dessen Eigenschaften? Dies ist, wie bereits erwähnt, die Aufgabe von JavaScript. Natürlich können wir an dieser Stelle nicht detailliert auf alle Details von JavaScript oder DOM eingehen, aber hier ist ein kleines Beispiel, wie JavaScript die Sichtbarkeit eines Style Sheet Layers in beiden Browsern (Sie wissen sicherlich, welche angesprochen werden) ändern kann.

Anmerkung: Jedes Stück HTML hat innerhalb des Dokuments seine Position, ähnlich dem Verzeichnis eines Telefonbuchs. Wenn Sie dieses Stück HTML finden (darauf zugreifen) wollen, müssen Sie den gleichen Hierarchie- Prozess durchlaufen wie bei der Suche in einem Telefonbuch, bspw.

(Land) Bayern -> (Stadt) München -> (Einträge) B -> (Name) Becker

In JavaScript würde diese Referenz so aussehen:

Bayern.München.B.Becker

Nun, unter Becker werden wahrscheinlich noch weitere Informationen zu finden sein, wie etwa die Adresse oder die Telefonnummer, so dass die JavaScript- Referenz so geschrieben würde:

Bayern.München.B.Becker.Adresse

oder

Bayern.München.B.Becker.Nummer

Wenden wir diese Vorgehensweise auf ein DHTML- Dokument an, welches einen <DIV> layer [myLayer] mit Style- Attributen [top,left,width,height,z-index,visibility,etc] enthält. Der Layer selber enthält etwas Text "myText" (das visibility Attribut ist auf hidden gesetzt)

<DIV ID="myLayer" STYLE="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; z-index: 3; visibility: hidden;">
myText
</DIV>

In Netscape wird der DIV layer "myLayer" so adressiert: document.myLayer

Im Explorer sieht es so aus: document.all.myLayer.style

Das W3C sieht hingegen folgende Adressierung vor: document.GetElementById('myLayer').style

Um die Eigenschaft visibility unter "myLayer" zu adressieren, müssten Sie so vorgehen:

Netscape: document.myLayer.visibility

Explorer: document.all.myLayer.style.visibility

W3C: document.getElementById('myLayer').style.visibility

Um die Eigenschaft zu ändern, wird ihr ein neuer Wert zugewiesen.

Netscape: document.myLayer.visibility = "visible";

Explorer: document.all.myLayer.style.visibility = "visible";

W3C: document.getElementById('myLayer').style.visibility="visible";

Der vorher unsichtbare Layer ist nun sichtbar.

Dies ist in Grundzügen, wie DHTML funktioniert, aber beachten Sie, dass es hunderte von Attribut- Eigenschaften für Text, Bilder, Dokumente und Fenster gibt. Nicht alle dieser Eigenschaften werden in beiden Browsern unterstützt und manchmal bedarf es eines wahren Hürdenlaufs, um auf eine Eigenschaft zuzugreifen. Mit den Versionen 6 unterstützen sowohl Netscape als auch der Internet Explorer weitgehend die W3C DOM- Spezifikation, so dass man zumindest bei diesen Versionen nicht alles doppelt programmieren muss, jedoch wurde Netscape dadurch ziemlich unkompatibel zur Version 4, was bei ältereen Scripts zu ziemlichen Problemen führt.

 

zurück