Webseiten erstellen mit Javascript

Kapitel 5: Tipps und Tricks

Inhaltsverzeichnis

Dieses Buch ist unter einer Creative Commons-Lizenz lizensiert.

5.1 DHTML

Die Objekthierarchie des Microsoft Internet Explorers

Im vorherigen Kapitel haben Sie die in Javascript integrierte Objekthierarchie DOM 0 kennengelernt. Sie wissen nun, aus welchen Objekten dieses Modell besteht und wie Sie auf verschiedene Elemente der Webseite per Javascript zugreifen können. Sie wissen auch, dass dieses Modell nur sehr eingeschränkten Zugriff auf Elemente bietet: Die wichtigsten Objekte sind images[] und forms[], um auf Grafiken und Formulare zuzugreifen. Andere Elemente in Webseiten können kaum in DOM 0 dynamisch geändert werden.

Wollen Sie wirklich uneingeschränkt beliebige Elemente in Webseiten in Javascript dynamisch bearbeiten, so steht Ihnen ab dem Microsoft Internet Explorer 4 ein alternatives Objektmodell zur Verfügung: DHTML steht für Dynamic HTML und bietet Zugriff auf wirklich alle Elemente in Webseiten. Sie können in DHTML auf jedes Element einer Webseite zugreifen und es bearbeiten.

Während das Objektmodell DOM 0 noch recht übersichtlich war und sich in einer kleinen Grafik veranschaulichen ließ, platzt DHTML aus allen Nähten. Um wirklich Zugriff auf jedes Element einer Webseite zu bieten, besteht die Objekthierarchie von DHTML aus derart vielen Objekten, dass es nicht möglich ist, diese alle mal eben in einem Diagramm unterzubringen. Die grundlegenden Zugriffstechniken auf Objekte in DHTML werden jedoch im Folgenden vorgestellt.

In DOM 0 stehen zwei Möglichkeiten zur Verfügung, um ein Element eindeutig zu identifizieren: Entweder hangeln Sie sich die Objekthierarchie hinunter und geben jeweils einen nummerischen Index an, um beispielsweise auf das fünfte Bild im aktuellen Dokument zuzugreifen. Oder aber Sie geben dem Bild mit dem HTML-Attribut name einen Namen, so dass Sie es leichter per Javascript ansprechen können.

DHTML bedient sich eines anderen Mechanismus: Sie müssen, um ein Element Ihrer Webseite per Javascript ansprechen zu können, diesem im HTML-Code das Attribut id zuweisen. Der Unterschied zu name ist: Das Attribut id darf wirklich jedem beliebigen HTML-Tag zugewiesen werden. Jedes HTML-Element darf ein Attribut id erhalten. Außerdem darf der Wert eines id-Attributs im gesamten Dokument nicht noch einmal verwendet werden. Während also in DOM 0 ein Bild und ein Formular beide den name-Wert Umfrage erhalten dürfen, müßte sich der id-Wert unterscheiden - auch wenn es sich also um zwei unterschiedliche Objekte handelt.

Nachdem Sie den Elementen, die Sie in Javascript ansprechen möchten, einfach einen id-Wert geben, können Sie sie recht einfach identifizieren. Mit nummerischen Indizes kann in DHTML zwar auch gearbeitet werden, ist aber unüblich.

Um nun auf Elemente per DHTML zuzugreifen, hat Microsoft ein neues Objekt eingeführt und dies an das DOM 0-Objekt window.document angehängt. Dieses Objekt heißt all. Elemente, denen Sie einen id-Wert gegeben haben, sind automatisch dem Objekt all untergeordnet. Betrachten Sie folgendes Beispiel.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="">
      <input type="text" id="oInput" value="Hallo, Welt">
    </form>
    <script language="jscript">
      alert(window.document.all.oInput.value); 
    </script>
  </body>
</html>

Im Beispiel wird über das Objekt all auf ein Element der Webseite zugegriffen. Es wird also die Objekthierarchie DHTML verwendet. Deswegen - ganz wichtig - wird genaugenommen kein Javascript in die Webseite eingebunden, sondern JScript. Nachdem nur die Microsoft-Browser JScript verstehen und auch nur in diesen die Objekthierarchie DHTML zur Verfügung steht, darf der Code nicht in anderen Browsern ausgeführt werden, da dies dort sonst zu Fehlern führen würde. Indem der Code einfach als JScript-Code gekennzeichnet wird, wird er von anderen Browsern ignoriert.

Wie Sie sehen wird zuerst auf die aus DOM 0 bekannten Objekte window und document zugegriffen. Danach erfolgt der Zugriff auf das neue Objekt all. Hinter all wird der id-Wert des Objekts angegeben, auf das zugegriffen werden soll. Im obigen Beispiel ist das oInput. Hinter dem id-Wert folgt nun die Eigenschaft des Objekts, in diesem Beispiel value.

Wie Sie aus dem vorherigen Kapitel wissen, kann die Angabe des Objekts window jederzeit weggelassen werden. Die Ausgabe des Wertes im Formular könnte also auch wie folgt erfolgen.

alert(document.all.oInput.value);

DHTML bietet eine noch kürzere Schreibweise an: Sie können document.all komplett weglassen und direkt über Angabe eines id-Wertes auf ein Objekt zugreifen - kürzer geht es nicht.

alert(oInput.value);

Wenn Sie obiges Beispiel mit der verkürzten Schreibweise ausprobieren, führt dies zu einer Fehlermeldung im Internet Explorer. Obwohl der id-Wert oInput vergeben wurde, wird er nicht gefunden. In diesem Fall müssen Sie einfach dem übergeordneten Objekt - hier das Formular - ebenfalls einen id-Wert geben und dann über diesen auf das Objekt oInput zugreifen.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="" id="oForm">
      <input type="text" id="oInput" value="Hallo, Welt">
    </form>
    <script language="jscript">
      alert(oForm.oInput.value); 
    </script>
  </body>
</html>

Falls Sie also Probleme haben, direkt über den id-Wert auf ein Objekt zuzugreifen, kann dies daran liegen, dass es sich hierbei um ein Teilobjekt eines übergeordneten Objekts handelt. Deswegen müssen Sie in diesem Fall einfach über das übergeordnete Objekt zugreifen. Im obigen Beispiel war dies der Fall, da Eingabeschaltflächen immer zu einem übergeordneten Formular gehören müssen.

Über die Vergabe eines id-Wertes können Sie nun auf jedes beliebige Element einer Webseite zugreifen. Über die Vergabe mehrerer id-Werte können Sie sich - wie eben gesehen - über Objekte vorhangeln, bis Sie an dem von Ihnen benötigten Objekt angelangt sind - vorausgesetzt, die Objekte stehen in einer Eltern-Kind-Beziehung.

Welche Eigenschaften ein konkretes Objekt in DHTML bietet und welche Methoden Sie aufrufen können, ob die Eigenschaften nur gelesen oder auch beschrieben werden können - das können Sie nur anhand von Referenzen herausfinden. Microsoft stellt online im Microsoft Developer Network eine wahrhaft riesige Referenz zur Verfügung, die Ihnen Überblick über jedes einzelne Objekt bietet und erklärt, inwiefern es innerhalb von DHTML bearbeitet werden kann.

Ein paar interessante Eigenschaften und Methoden stehen jedoch jedem beliebigen Objekt in DHTML zur Verfügung.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script language="jscript">
      function clickme() { 
        oChange.innerText = "Danke, dass Sie geklickt haben!"; 
      } 
    </script>
  </head>
  <body>
    <span id="oChange" onclick="clickme()">Klick mich!</span>
  </body>
</html>

Über die Eigenschaft innerText kann Text zwischen dem geöffneten und geschlossenen HTML-Tag eines Objekts gelesen und geschrieben werden. Im obigen Beispiel wird bei Mausklick auf das <span>-Tag die Funktion clickme() aufgerufen, in der der Eigenschaft innerText des Objekts oChange ein neuer Wert hinzugefügt wird. Daraufhin wird der neue Wert automatisch in der Webseite angezeigt - dynamisches HTML pur!

Im folgenden Beispiel wird nicht auf die Eigenschaft innerText, sondern outerHTML zugegriffen, mit der noch erstaunlichere Dinge möglich sind.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script language="jscript">
      function clickme() { 
        oChange.outerHTML = "<input type='button' value='Danke, dass Sie geklickt haben!'>"; 
      } 
    </script>
  </head>
  <body>
    <span id="oChange" onclick="clickme()">Klick mich!</span>
  </body>
</html>

Während über die Eigenschaft innerText auf den Text zwischen den HTML-Tags zugegriffen wird, wird über outerHTML auf den HTML-Tag selbst zugegriffen. Im obigen Beispiel wird nun dieser Eigenschaft des Objekts oChange einfach ein neuer HTML-Tag zugewiesen, nämlich der <input>-Tag zum Anzeigen von Schaltflächen. Durch den Mausklick auf das <span>-Tag wird die Funktion clickme() aufgerufen, die nun der Eigenschaft outerHTML einen neuen HTML-Tag zuweist. Daraufhin wird automatisch und dynamisch in der Webseite das neue Objekt eingeblendet - nämlich eine Schaltfläche zum Anklicken.

Beim Zuweisen von Text an die Eigenschaft outerHTML müssen Sie den kompletten geöffneten HTML-Tag angeben - inklusiver geöffneter und geschlossener spitzer Klammer. Den abschließenden HTML-Tag können Sie weglassen.

Sie haben in den Beispielen bisher ebenfalls gesehen, dass Event-Handler wie beispielsweise onclick auch in HTML-Tags wie <span> stehen können. DHTML dehnt den Einsatz von Event-Handlern auf fast alle HTML-Tags aus. Sie können wirklich für fast jedes HTML-Tag das Ereignis Mausklick abfangen.

Zusätzlich zum erweiterten Einsatz von Event-Handlern definiert DHTML auch eine ganze Reihe neuer Event-Handler. So können Sie innerhalb von Javascript auf viel mehr Benutzereingaben reagieren und dynamischere Webseiten erstellen als mit DOM 0. Sie können beispielsweise nicht nur Mausereignisse abfangen, sondern auch Tastatureingaben.

Welche Objekte welche Event-Handler unterstützen, kann auch nur wieder der Blick in eine Referenz zeigen. DHTML ist so umfangreich und bietet derart viele Möglichkeiten an, dass es nicht möglich ist, sich alle Einsatzgebiete von Event-Handlern zu merken.

5.2 Eigenschaften von Objekten auflisten

Hilfreiche Javascript-Routine

Die spezielle for-Schleife zum Zugreifen auf Eigenschaften eines Objekts hatten Sie schon kennengelernt. Im Folgenden werden nicht nur die Namen der Eigenschaften eines Objekts ausgegeben, sondern auch die Werte, auf die die Eigenschaften gesetzt sind.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <span id="oChange">Klick mich!</span>
    <script language="jscript">
      document.write("<hr>"); 
      for (var element in oChange) { 
        document.write(element + "=" + oChange[element] + "<br>"); 
      } 
      document.write("<hr>"); 
    </script>
  </body>
</html>

Innerhalb der for-Schleife steht in der Variablen element jeweils der Name einer Eigenschaft des Objekts oChange zur Verfügung. Die aus DOM 0 bekannte Methode document.write() schreibt den Namen der Eigenschaft in das Dokument hinein. Außerdem wird der Wert der Eigenschaft ausgegeben. Hier macht man sich den speziellen Aufbau von Objekten zunutze: Objekte sind nichts anderes als assoziative Arrays. Sie können auf eine Eigenschaft in einem Objekt wie gewohnt über den Zugriffsoperator zugreifen.

oChange.value

Sie können stattdessen das Objekt auch als Array betrachten und den Namen der Eigenschaft als Index in eckigen Klammern angeben.

oChange["value"]

Beide Schreibweisen sind identisch und beliebig austauschbar. Nachdem in der for-Schleife der Name der Eigenschaft in einer Variablen element angegeben ist, kann diese Variable als Wert zwischen eckige Klammern gestellt werden, um den Wert der Eigenschaft selber ins Dokument hineinzuschreiben.

Die vorgestellte Routine ist hilfreich, um in einem Browser zu überprüfen, welche Eigenschaften von einem Objekt zur Verfügung gestellt werden und auf welche Werte die Eigenschaften momentan gesetzt sind. Diese Routine funktioniert grundsätzlich auch mit dem Netscape Navigator und kann in allen Objekthierarchien verwendet werden. Wichtig ist nur, dass Sie hinter dem Schlüsselwort in im Schleifenkopf von for ein gültiges Objekt angeben - also ein Objekt, das in der vom Browser unterstützten Objekthierarchie auch existiert.

Wenn Sie obige Routine in anderen Browsern einsetzen wollen, vergessen Sie nicht, das Attribut language im <script>-Tag zu ändern.

5.3 Browser abfragen

Browserabhängiger Code

Im ersten Kapitel haben Sie bereits gesehen, dass die Programmiersprache Javascript in verschiedenen Versionen vorliegt. Neben Javascript bietet Microsoft die Programmiersprache JScript an, die einen größeren Befehlsumfang als Javascript besitzt. Außerdem unterstützen die Browser verschiedene Objekthierarchien. Es ist daher in der Praxis oft notwendig, innerhalb von Javascript zu überprüfen, in welchem Browser und welcher Version das Script gerade abläuft. Damit kann verhindert werden, dass Javascript-Befehle verwendet werden oder auf Objekte zugegriffen wird, die im aktuellen Browser nicht zur Verfügung stehen.

Am weitesten verbreitet ist folgende Überprüfung.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      if (document.all) { 
        alert("DHTML im Microsoft Internet Explorer 4+"); 
      } else if (document.layers) { 
        alert("Layers im Netscape Navigator 4"); 
      } else if (document.getElementById) { 
        alert("DOM 1/2"); 
      } else { 
        alert("DOM 0"); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

Hinter dem Schlüsselwort if wird einfach in runden Klammern ein Objekt angegeben. Daraufhin wird überprüft, ob dieses Objekt im aktuellen Browser existiert. Ist dies der Fall, wird der Wahrheitswert true zurückgegeben. Ist die Bedingung also wahr, wird der folgende Anweisungsblock ausgeführt.

Indem nun zwischen den runden Klammern die Existenz verschiedener Objekte überprüft wird, kann jeweils Code für einen bestimmten Browser in den nachfolgenden Anweisungsblock gestellt werden. Für den Microsoft Internet Explorer wird überprüft, ob das Objekt document.all existiert. Denn dieses Objekt ist wesentlicher Bestandteil von DHTML und daher nur im Internet Explorer ab Version 4 vorhanden. Der Zugriff auf Elemente in der Webseite über DHTML müsste demnach im ersten Anweisungsblock erfolgen.

Kennt der Browser document.all nicht, handelt es sich wahrscheinlich um einen Browser eines anderen Herstellers. Im obigen Code wird als nächstes überprüft, ob das Objekt document.layers existiert. Dieses Objekt ist Schlüsselelement in der Layer-Zugriffstechnologie des Netscape Navigator 4. Eine dynamische Webseiten-Programmierung für diesen Browser müsste daher hinter dieser Überprüfung im Anweisungsblock erfolgen.

Kennt der Browser document.layers nicht, wird überprüft, ob eine Methode document.getElementById() existiert. Der Microsoft Internet Explorer bietet diese Funktion ab Version 5 an, der Netscape Navigator ab Version 6. Diese Funktion ist wesentlicher Bestandteil der Objekthierarchie DOM 1/2. Ist also die Methode document.getElementById() vorhanden, kann im darauffolgenden Anweisungsblock per DOM 1/2 auf Elemente in Webseiten zugegriffen werden.

Beachten Sie, dass es sich bei document.getElementById() tatsächlich um eine Methode handelt. Während ein Methodenaufruf immer die Angabe von runden Klammern hinter dem Methodennamen erfordert, findet die Überprüfung auf Existenz einer Methode lediglich über den Namen selbst und ohne runde Klammern statt.

Steht auch die Methode document.getElementById() im Browser nicht zur Verfügung, unterstützt er kein DOM 1/2. Im else-Anweisungsblock kann nun lediglich über DOM 0 auf Elemente in der Webseite zugegriffen werden.

Eine Überprüfung auf das Vorhandensein bestimmter Objekte wird im Internet in den Javascript-Expertenforen zum Teil kritisch gesehen. Das Problem ist, dass lediglich die Existenz eines Objektes nicht bedeutet, dass das Objekt genau für den von Ihnen vorgesehenen Zweck verwendet werden kann. Es kann ja sein, dass beispielsweise ein anderer Browser-Hersteller ein Objekt document.all einführt. Obiger Code würde dieses Objekt finden und daraufhin versuchen, im DHTML-Modell mit diesem Objekt zu arbeiten. Wenn der Browser-Hersteller dieses Objekt jedoch für einen völlig anderen Zweck bereitstellt, wird Ihr Code nicht funktionieren und es Fehlermeldungen im Browser hageln.

Praktisch gesehen spielt dieses Szenario jedoch keine Rolle. Der Browser-Markt wird hauptsächlich zwischen Microsoft und Netscape aufgeteilt. Daneben gibt es keine anderen Objektmodelle - wenn doch, kommen sie so selten vor, dass sich um diese anderen Objektmodelle niemand kümmert.

Wer es dennoch ganz genau machen möchte, der überprüft einen Browser über das aus DOM 0 bekannte Objekt navigator. Derartige Verfahren sind jedoch recht aufwendig, weil nicht mehr lediglich auf das Vorhandensein eines Objekts geprüft wird, sondern zum einen Browser-Hersteller und Browser-Version über das Objekt navigator herausgefunden werden müssen, zum anderen anhand der gefundenen Daten dann festgelegt werden muss, ob DHTML, Layers, DOM 1/2 oder nur DOM 0 unterstützt wird.

5.4 DOM 1/2

Der offizielle Standard

So schön die Möglichkeiten von DHTML sind - dieses Objektmodell steht ausschließlich im Microsoft Internet Explorer zur Verfügung. Um zu verhindern, dass nun jeder Browser-Hersteller sein eigenes Objektmodell erfindet und mit Microsoft gleichzieht, arbeitet das W3C an einem gemeinsamen Standard für das Erstellen dynamischer Webseiten. Dieser Standard liegt inzwischen in der zweiten Version vor. DOM 2 baut jedoch auf DOM 1 lediglich auf und stellt eine Erweiterung dar. Es handelt sich also um ein Objektmodell, das in zwei kompatiblen Versionen vorliegt.

Genauso wie in DHTML werden in DOM 1/2 Elemente in Webseiten über das Attribut id identifiziert. Der Zugriff auf ein Element ist jedoch nicht wie in DHTML über das Objekt document.all möglich. Stattdessen muss über die Methode getElementById() auf das Objekt zugegriffen werden. Sehen Sie sich dazu folgendes Beispiel an.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      function clickme() { 
        var obj = document.getElementById("oChange"); 
        obj.firstChild.nodeValue = "Danke, dass Sie geklickt haben!"; 
      } 
    </script>
  </head>
  <body>
    <span id="oChange" onclick="clickme();">Klick mich!</span>
  </body>
</html>

Bei Mausklick auf das <span>-Tag wird die Funktion clickme() ausgeführt. In dieser Funktion wird zuerst über die Methode getElementById() das Objekt erhalten, das das Element repräsentiert, dessen id-Wert der Methode in Klammern übergeben wird. DOM 1/2 schreibt nicht vor, mit welchem Objekt die Methode getElementById() verknüpft ist. Glücklicherweise kann diese Funktion sowohl im Internet Explorer als auch im Netscape Navigator über das Objekt document aufgerufen werden, so dass hier nicht zwischen den Browsern unterschieden werden muss.

Nachdem Sie das Objekt erhalten und in einer beliebigen Variable gespeichert haben, können Sie es bearbeiten. DOM 1/2 unterscheidet drei Objekttypen: Es gibt HTML-Tags, HTML-Attribute und Text. Alles, was nicht in spitzen Klammern steht, sondern zwischen einem geöffneten und einem geschlossenen Tag, ist Text.

Im Beispiel wird über den id-Wert oChange das <span>-Element angesprochen. Die Variable obj im Code repräsentiert daher den HTML-Tag und ist daher auch vom Typ HTML-Tag. Nachdem bei einem Mausklick der Text im <span>-Tag selber geändert werden soll, benötigen wir eigentlich nicht den <span>-Tag, sondern den Text zwischen geöffnetem und geschlossenen <span>-Tag. Nachdem es jedoch nicht möglich ist, einem Text selber einen id-Wert zuzuweisen - das kann ja ausschließlich in HTML-Tags geschehen - sind wir mit dem <span>-Tag immerhin schon mal recht nah am Text dran.

Das Geniale an DOM 1/2 ist nun folgendes: Diese Objekthierarchie besteht nicht aus ganz konkreten Objekten, die alle eine ganz konkrete Eltern-Kind-Beziehung besitzen. Das Objektmodell richtet sich vielmehr nach dem in der Webseite verwendeten HTML-Code. Ein Objekt ist hierbei dann ein Eltern-Objekt, wenn zwischen dem geöffneten und dem geschlossenen HTML-Tag des Objekts weitere Objekte liegen. Auf das obige Beispiel übertragen bedeutet das, dass das <span>-Tag ein Eltern-Objekt des Textes ist, der zwischen geöffnetem und geschlossenem <span>-Tag liegt.

DOM 1/2 erfordert demnach nicht wie DOM 0 oder DHTML ein Auswendiglernen von Objekthierarchien und Eltern-Kind-Beziehungen. Stattdessen richtet sich das Modell jeweils nach dem aktuell verwendeten Code. Mit einem Blick in Ihren Code können Sie sofort sehen, welche Eltern-Objekte welche Kind-Objekte besitzen. Verändern Sie den HTML-Code, verändern sich auch die Objektbeziehungen. Das Modell passt sich also punktgenau an das Dokument an - besser kann ein Document Object Model nicht sein.

Sie wissen bereits, dass Sie über den id-Wert und über getElementById() Objekte in Javascript erhalten können, die das entsprechende HTML-Element repräsentieren. Sie können sich von jedem beliebigen Objekt zu einem anderen Objekt in DOM 1/2 vorhangeln. Denn jedes Objekt besitzt die Eigenschaften firstChild, lastChild und parentNode. Über firstChild kann auf das erste Kind-Objekt zugegriffen werden, über lastChild auf das letzte Kind-Objekt. Die Reihenfolge ergibt sich wiederum aus der Reihenfolge, in der die Objekte im HTML-Code aufgelistet sind. Über parentNode kann auf das übergeordnete Objekt zugegriffen werden. Wollen Sie nicht auf das erste oder letzte Kind-Objekt zugreifen, steht außerdem ein Array childNodes[] zur Verfügung. Sie geben in eckigen Klammern einfach den Index des Kind-Objekts an, auf das Sie zugreifen möchten.

Die Eigenschaft firstChild kommt im obigen Beispiel zum Einsatz. Das <span>-Tag besitzt ein Kind-Objekt, nämlich den Text zwischen dem geöffneten und geschlossenen <span>-Tag. Um nun ein Objekt zu erhalten, das den Text selber repräsentiert, wird einfach über firstChild auf das erste Kind-Objekt des <span>-Tags zugegriffen. Nachdem zwischen den <span>-Tags nur der Text steht, gibt es letztendlich nur ein einziges Kind-Objekt. Sie könnten also auch die Eigenschaft lastChild im Code-Beispiel verwenden. Möchten Sie stattdessen das Array childNodes[] einsetzen, geben Sie in eckigen Klammern den Index 0 an.

Nachdem nun über firstChild ein Objekt zur Verfügung steht, das den Text selber repräsentiert, wird über die Eigenschaft nodeValue auf den Wert des Objekts selber zugegriffen - sprich auf den tatsächlich angezeigten Text im Browser. Indem nun dieser Eigenschaft ein neuer Text hinzugefügt wird, wird dynamisch der Inhalt der Webseite geändert.

Betrachten Sie nun folgendes Beispiel.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      function clickme() { 
        var obj = document.getElementById("oBody"); 
        obj.firstChild.firstChild.nodeValue = "Danke, dass Sie geklickt haben!"; 
      } 
    </script>
  </head>
  <body id="oBody">
    <span onclick="clickme();">Klick mich!</span>
  </body>
</html>

Wenn Sie das Beispiel im Browser ausprobieren, geschieht das gleiche wie im vorherigen Beispiel: Der angeklickte Text wird wieder ersetzt. Innerhalb der Funktion clickme() wird nun aber anders auf den Text zugegriffen. Die Variable obj repräsentiert ein Objekt mit dem id-Wert oBody. Dieser Wert ist dem <body>-Tag zugewiesen. Über die Eigenschaft firstChild wird auf das erste Kind-Objekt innerhalb des <body>-Tags zugegriffen - das ist der <span>-Tag. Über eine weitere Angabe von firstChild wird auf das Kind-Objekt des <span>-Tags zugegriffen - das ist nun der Text selber. Jetzt kann auf die Eigenschaft nodeValue zugegriffen werden und der angezeigte Text ersetzt werden.

Wichtig ist: Über den id-Wert und die Methode getElementById() können Sie jedes Element auf einer Webseite erreichen. Gleichzeitig können Sie von jedem Element auch ein anderes Element in einer Webseite erreichen, indem Sie sich mit firstChild, lastChild, childNodes[] und parentNode zu anderen Objekten vorhangeln.

Nachdem Sie nun wissen, wie Sie Objekte in Javascript ansprechen können, stellt sich die Frage, welche Eigenschaften diese Objekte eigentlich besitzen. Auch hier zeigt sich der geniale Ansatz von DOM 1/2: Ein Objekt besitzt genau die gleichen Eigenschaften wie der entsprechende HTML-Tag. Wenn der <img>-Tag also Attribute wie width und height besitzt, dann stehen diese Attribute automatisch auch als Eigenschaften des Objekts in Javascript zur Verfügung. Grundsätzlich gilt, dass Eigenschaften immer und durchgehend klein geschrieben werden. Betrachten Sie dazu folgendes Beispiel.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var Prozent = 99; 

      function clickme() { 
        if (Prozent >= 0) { 
          var obj = document.getElementById("oAmpel"); 
          obj.width = 70 * Prozent / 100; 
          obj.height = 200 * Prozent / 100; 
          --Prozent; 
        } 
      } 
    </script>
  </head>
  <body>
    <input type="button" onclick="clickme();" value="Klick mich!"><br>
    <img src="ampel.png" width="70" height="200" alt="" id="oAmpel">
  </body>
</html>

Die Webseite zeigt eine Schaltfläche und eine Grafik an. Der Grafik ist der id-Wert oMouse zugewiesen. Wenn die Schaltfläche angeklickt wird, wird eine Funktion clickme() ausgeführt. In dieser Funktion wird das Objekt mit getElementById() erhalten, das die Grafik repräsentiert. Der HTML-Tag <img> besitzt unter anderem die Attribute width und height. Diese Attribute stehen nun auch als Eigenschaft des Objekts zur Verfügung und werden im Beispiel jeweils um einen Prozentpunkt verringert. Nachdem durch jeden Funktionsaufruf auch die Variable Prozent um den Wert 1 verringert wird, ist nach 100 Mausklicks auf die Schaltfläche die Grafik komplett aus dem Anzeigebereich verschwunden.

Neben den Eigenschaften, die den Attributen der HTML-Tags entsprechen, stellt DOM 1/2 ein paar Funktionen zur Verfügung, über die beispielsweise Objekte eingefügt und verschoben werden können. Betrachten Sie hierzu folgendes Beispiel.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      function clickme() { 
        var oBody = document.getElementById("oBody"); 
        oBody.insertBefore(oBody.firstChild, oBody.lastChild); 
      } 
    </script>
  </head>
  <body id="oBody">
    <div><input type="button" onclick="clickme();" value="Klick mich!"></div>
    <img src="ampel.png" width="70" height="200" alt="">
  </body>
</html>

In diesem Fall werden bei Mausklick die Positionen der Schaltfläche und der Grafik ausgetauscht. Die Funktion clickme() greift hierzu auf das Objekt mit dem id-Wert oBody zu, das das Dokument an sich repräsentiert. Für dieses Objekt wird die Methode insertBefore() aufgerufen, der in Klammern zwei Objekte übergeben werden müssen: Das als zweiter Parameter angegebene Objekt wird direkt vor das als ersten Parameter angegebene Objekt eingefügt. Beachten Sie, dass der erste Parameter der Methode insertBefore() ein Kind-Objekt sein muss. Der zweite Paramter kann ein beliebiges Objekt sein - also entweder ein Kind-Objekt, ein anderes Objekt aus der Webseite oder auch ein neu erstelltes Objekt. Handelt es sich beim zweiten Parameter um ein Objekt, das in der Webseite vorkommt, so wird es durch den Methodenaufruf von insertBefore() verschoben. Genau das passiert in diesem Beispiel: Das letzte Kind-Objekt von oBody, auf das mit lastChild zugegriffen wird, wird vor das erste Kind-Objekt von oBody verschoben, auf das mit firstChild zugegriffen wird. Nachdem es lediglich zwei Kind-Objekte von oBody gibt, wechseln diese beiden bei jedem Mausklick auf die Schaltfläche ihre Position.

Abschließend noch kurz ein Wort zu Event-Handlern in DOM 1/2: Wie in DHTML erweitert auch DOM 1/2 die zur Verfügung stehenden Event-Handler. Ebenfalls wie in DHTML können auch in DOM 1/2 für fast jedes beliebige Element in einer Webseite Ereignisse abgefangen werden. So kann der Event-Handler onclick für Bilder, Formular-Schaltflächen, ganz gewöhnliche Texte und so weiter eingesetzt werden. In diesem Fall benötigen Sie auch für DOM 1/2 eine Dokumentation, um zu sehen, welche Event-Handler für welche HTML-Elemente unterstützt werden. Nachdem die Unterstützung jedoch sehr umfangreich ist, können Sie sich normalerweise darauf verlassen, dass der Event-Handler schon funktionieren wird - andernfalls sehen Sie es ja dann beim Testen, wenn es nicht klappt.

5.5 Aufgaben

Übung macht den Meister

Sie können die Lösungen zu allen Aufgaben in diesem Buch als ZIP-Datei erwerben.

  1. Erstellen Sie eine Webseite, die eine Grafik und zwei Schaltflächen zum Zoomen der Grafik enthält. Über die eine Schaltfläche soll die Grafik vergrößert werden, über die andere verkleinert werden können. Lösen Sie die Aufgabe unter Verwendung von DOM 1/2.

  2. Lösen Sie Aufgabe 1 unter Verwendung von DHTML.

  3. Erstellen Sie eine Webseite, die zwei Grafiken enthält. Bei Doppelklick auf eine der beiden Grafiken sollen die Positionen der Grafiken vertauscht werden. Lösen Sie die Aufgabe unter Verwendung von DOM 1/2.

  4. Lösen Sie Aufgabe 3 unter Verwendung von DHTML.

Copyright © 2001-2010 Boris Schäling