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