Hauptmenü

Untermenü

DOM-Scripting - Probleme

1. Auslagerung

Dies ist immer der allererste Schritt. Über <script type="text/javascript" src="..."> bindet man die JavaScript-Datei(en) in das HTML-Dokument ein. Aber wo? Nun da gibt es ein kleines Problem. Oder genauer gesagt, deren zwei. Und das hat (mal wieder) mit dem Internet Explorer zu tun.

Oben, unten oder wo?

Die Wurzel allen Übels liegt darin begründet, dass man auf ein HTML-Element erst dann zugreifen kann, wenn es verfügbar ist. Bindet man also eine JavaScript-Datei im <head>-Bereich einer Seite ein, so kann man beim DOM-Scripting nicht direkt(!) auf ein Element zugreifen, da es zu diesem Zeitpunkt schlichtweg noch nicht existiert. Besonders der Internet Explorer ist dafür gefürchtet.

2. Lösungen

Hier gibt es einige, die alle ihre Vor- und Nachteile haben.

onload

Man weist den entsprechenden Elementen einen Event-Handler in obiger Methode des window-Objektes zu (dazu gleich mehr). Der Vorteil ist, dass man hier ganz sicher sein kann, dass alle Dateien komplett geladen worden sind. Und das ist leider auch der Nachteil. Denn das bezieht wirklich alles mit ein, Bilder, externe Daten oder auch Flash-Filme (glaub ich zumindest). Und das kann schon mal ein wenig dauern, bis das onload ausgelöst wird. Und es gibt bekanntlicherweise nichts Schlimmeres als wild drauflosklickende User.

onreadystatechange

Ja, ihr habt richtig gehört. Denn das gibt es nicht nur bei einem Ajax-Request. Soweit zur guten Nachricht. Kommen wir nun zur schlechten. Denn leider kann man damit nicht viel anfangen, da der Internet Explorer (zumindest bei meinen Tests) nur beim vollständigen Laden der Seite darauf reagierte. Und das beinhaltet natürlich mal wieder auch alle Bilder und so weiter.

DOMContentLoaded

Das ist zwar Teil der JavaScript-Spezifikation, wird aber leider von diesem Monster aus Redmond erst ab der Version 9 unterstützt. Dieses Event greift, sobald die HTML-Datei(!) geladen wurde und wäre somit ideal. Wenn nicht ... siehe oben. Stattdessen gibt es für diesen Quasimodo unter den Browsern die Möglichkeit mittels der Microsoft-spezifischen Methode doScroll zu ermitteln, wann zumindest der HTML-Code geladen wurde. Da das Thema recht komplex ist, werde ich darauf in einem schon geplanten Tutorial eingehen (siehe Roadmap).

Ein Tipp

Wenn ihr kein Framework benutzt und wirklich was lernen wollt, arbeitet erst mal mit window.onload. Oder bindet den Code an Ende ein (siehe unten).

3. Einbindungsmöglichkeiten

All-in-one

Ihr packt den gesamten JavaScript-Code in eine oder mehrere Dateien. In diesem Fall bindet ihr die JavaScript-Dateien als letzte Elemente oberhalb des schließenden </body>-Tags ein, also so.


<html>
  <
head>
    ...
  </
head>
  <
body>
    ...
    <!-- 
Hier Dateien einbinden! -->
  </
body>
</
html>

Aufgeteilt

Wenn ihr dagegen euren Code der Übersichtlichkeit halber nach den Funktionalitäten aufteilt, so kann man durchaus die entsprechende JavaScript-Datei direkt unterhalb des entsprechenden HTML-Elements einbinden. Nehmen wir als Beispiel mal an, ihr habt ein Formular, das ihr mit JavaScript manipulieren möchtet. Und der entsprechende Code steht in einer JS-Datei. Dann könnt ihr so vorgehen.


<body>
  ... 
Irgendein Code ...
  <
form ...>
    <!-- 
euer Formular -->
  </
form>
  <!-- 
Hier Datei einbinden! -->
  ... 
Weiterer Code ...
</
body>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt