Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 16 DOM
  gp 16.1 Der DOM-Baum
  gp 16.2 Navigation im Baum
  gp 16.3 Den Baum modifizieren
    gp 16.3.1 Wichtige Methoden
    gp 16.3.2 Zugriff auf einzelne Elemente
    gp 16.3.3 Zugriff auf Tags
    gp 16.3.4 Beispiele

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.


Rheinwerk Computing

16.1 Der DOM-Baum  toptop

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.

Abbildung
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:

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 16.2     Der DOM-Baum im DOM Inspector von Firefox

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de