|
Modelle sollten sich bemühen, dem Portrait ähnlich zu sehen.
– Salvador Dali Kapitel 16 DOM
JavaScript entwickelt sich natürlich weiter. Ein gutes Beispiel dafür ist JavaScript 1.5. Diese Version schließt die Lücke, die bisher zwischen den JavaScript-Versionen und dem ECMAScript-Standard, 3. Revision, bestand. Dieser Sprachstandard (die offizielle Spezifikation finden Sie unter http://www.ecma.ch/ oder auf der Buch-DVD) entspricht in etwa dem Sprachumfang von JavaScript 1.1, wurde aber bisher noch von keinem Browser komplett unterstützt. Der Internet Explorer 4 war sehr nahe dran, und der Internet Explorer 5.x/6/7 unterstützt (bis auf ein paar Bugs) vollständig ECMAScript (oder kurz: ECMA-262). Auch aktuelle Mozilla-Browser (inklusive Nebenprodukten wie Firefox, Camino und Galeon) sind ECMA-compliant.
Wenn jedoch im Zusammenhang mit JavaScript von Standards gesprochen wird, dann ist die Rede von DOM, dem Document Object Model. Vereinfacht gesagt, soll ein HTML-Dokument so modelliert werden, dass mit JavaScript darauf zugegriffen werden kann. Wie in den vier DHTML-Kapiteln schon angedeutet wurde, geht der Internet Explorer (ab Version 4) hier viel weiter als der Netscape Navigator 4. Die zueinander inkompatiblen DOM-Umsetzungen der beiden Browser-Hersteller sind für den Programmierer ein stetes Ärgernis. Da zudem noch sowohl Netscape als auch Microsoft ihre Umsetzung für die jeweils bessere hielten, war zunächst keine Einigung in Sicht. Für solche Fälle gibt es glücklicherweise (mehr oder weniger) unabhängige Gremien wie das W3C, die mittlerweile einen DOM-Standard abgesegnet haben. Die Konsequenz daraus ist, dass sich der Internet Explorer seit Version 5 an den Standard hält und die Mozilla-Browser ebenfalls (und natürlich auch Safari/Konqueror und Opera). Da die meisten der DOM-Effekte auch mit herkömmlichen Mitteln zu erzielen und damit abwärtskompatibel zu älteren Browsern sind, ist die Zielgruppe für DOM-Effekte noch nicht allzu groß. In Zusammenhang mit AJAX allerdings sieht das schon ganz anders aus: Dort gewinnt DOM zunehmend an Bedeutung.
 16.1 Der DOM-Baum 
Das HTML-Dokument wird in einen Baum umgewandelt. Jedes HTML-Element und auch jeder Text, der nicht von Tags umgeben ist, wird zu einem Knoten (engl. node) in dem Baum. Elemente zwischen einem öffnenden und dem dazugehörigen schließenden Tag sind Kindknoten (engl. child nodes), so dass auch eine Hierarchie gegeben ist. In diesem Kapitel betrachten wir folgendes Beispieldokument:
<html>
<head>
<title>DOM-Demo</title>
</head>
<body id="alles">
<h3 id="Ueberschrift">DOM-Demo</h3>
<img src="ball.gif" id="Ball1" />
<img src="ball.gif" id="Ball2" />
<img src="ball.gif" id="Ball3" />
<img src="ball.gif" id="Ball4" />
</body>
</html>
In Abbildung 2.1 sehen Sie, wie der DOM-Baum für das oben gezeigte Dokument aussieht.
Beachten Sie, dass jedes Tag ein id-Attribut trägt. Hiermit kann das Tag dann von JavaScript aus angesprochen werden. Sie ahnen bereits: Es geht wohl auch um irgendein Array mit irgendeinem Index, wie bisher immer, aber der Übersichtlichkeit halber ist es auch hier besser, sprechende Namen zu verwenden.
Hier klicken, um das Bild zu Vergrößern
Abbildung 16.1 Der DOM-Baum des HTML-Dokuments
In manchen Mozilla-Browsern gibt es einen so genannten DOM Inspector (etwa im Firefox: Extras N DOM Inspector). Der zeigt die DOM-Struktur schön übersichtlich an:
Hier klicken, um das Bild zu Vergrößern
Abbildung 16.2 Der DOM-Baum im DOM Inspector von Firefox
|
