HomeKontaktImpressum
Sie sind hier: Home

Fallstricke bei JavaScript/DOM

Ist einmal die Entscheidung für das Einbetten von JavaScript in die Internetseite gefallen, so können sich hierdurch Probleme ergeben, die mit der Position des Codes auf der Website zusammenhängen. JavaScript/DOM Zugriffe mit Methoden wie getElementById setzen voraus, dass der Browser diese HTML-Objekte vor Ausführung des Scripts auch kennt.

Eine Besonderheit, die gerade bei der Einbettung von JavaScript-Code in eine Internetseite zu beachten ist, ist die, dass der eingebaute Code per entsprechenden DOM-Methoden nur auf bereits existierende Elemente des HTML-Elementenbaumes zugreifen kann. Dies bedeutet, dass Zugriffe auf einzelne in der Internetseite enthaltene HTML-Elemente – beispielsweise mittels der Methode getElementById – erst dann erfolgen können, wenn sich diese Elemente im Quelltext der Seite vor dem eingebundenen Script-Code, der für den Zugriff zuständig ist, befinden.

Normalerweise sollten JavaScript-Bereiche nicht schon im Header der HTML-Datei eingefügt werden sondern erst am Ende einer Internetseite und damit direkt vor dem schließenden Teil des Body-Tags. Auf diese Weise soll sicher gestellt werden, dass alle Zugriffe auf HTML-Elementobjekte, die mittels Methoden wie beispielsweise getElementById erfolgen, den erwarteten HTML-Code auch bereits vorfinden – natürlich immer vorausgesetzt, dass der Code nicht fehlerhaft ist.

Wird ein Script-Bereich innerhalb des Head-Tags, also im Kopf der Datei, notiert, so ergeben sich hierdurch Abhängigkeiten, die im Zuge der Entwicklung entsprechend berücksichtigt werden müssen. So darf der Code nicht sofort auf Elemente der HTML-Datei zugreifen, da diese ja erst im nachfolgenden Quelltext der Seite definiert werden. Ansonsten würde der JavaScript-Code – in Fällen, in denen er nicht innerhalb einer Funktion oder Klasse gekapselt ist – umgehend ausgeführt. Dies führt dann zu entsprechenden Fehlern bei der Ausführung des Scripts.

Eine Möglichkeit derartige Abhängigkeiten aufzulösen ist die, dass JavaScript-Anweisungen, die dem Zugriff auf oder der Manipulation von Elementen dienen, grundsätzlich erst nach dem vollständigen Laden der Internetseite ausgeführt werden. Hierzu sollte vom JavaScript-Event „onLoad” Gebrauch gemacht werden. Dabei handelt es sich um ein Ereignis (engl. event) welches auftritt, wenn der Ladevorgang abgeschlossen, die Internetseite also komplett beim Browser angekommen ist.

Dieses Event kann mit einem Event-Handler belegt werden, indem das zugehörige Attribut des Body-Tags mit einem JavaScript-Aufruf belegt wird. Über diesen Aufruf werden die entsprechenden Operationen im JavaScipt-Code eingeleitet. Durch Nutzung dieses Event-Handlers wird also erst dann mit der Ausführung des Quelltextes begonnen, wenn die Seite vollständig geladen wurde. Zugriffe – etwa per getElementById – auf das JavaScript/DOM-Modell können so auch dann nicht mehr schief gehen, wenn der Script-Code innerhalb des Header-Bereichs der Internetseite steht.

Weiter geht es mit dem Thema CSS-Dateien einbetten, wo es unter Anderem um die Faktoren geht, die zur Entscheidungsfindung für oder wider einer Integration von CSS beitragen sollen.
























  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website