Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Nicht zu früh zugreifen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Best practice - Sie können erst dann auf DOM-Elemente zugreifen, wenn der Browser den DOM-Baum fertiggestellt hat. In diesem Film erläutern wir Ihnen die Klippen, die Ihnen da drohen, und wie Sie diese umschiffen.
05:05

Transkript

Der Zugriff auf Element in einer Website über das dom-konzept ist im Grunde sehr einfach, aber es gibt einige Fallen auf die sie aufpassen müssen und ich versuche Sie in diesem Film um diese Fallen herumzulotzen, schauen wir uns dieses Beispiel mal an. Ich habe hier wieder verschiede Elemente einer Webseite und mit Document getElementsByTagName von IMG, von 0 greife ich auf das erste Bild der Webseite zu und dessen Eigenschaft Source, will ich auswerten und dann in einem l art Dialog anzeigen. Nur wenn Sie die Seite laden geht kein l Art auf, wenn wir uns dann allerdings die Fehlerkonsole unseres Browsers ansehen, dann sehen wir so eine Meldung document.getElementsByTagName von IMG von 0 ist undefined. Da ist ganz offensichtlich irgendetwas schiefgegangen. Rein syntaktisch ist das Beispiel aber okay. Vielleicht kommen Sie auf die Idee, wenn ich jetzt was ändere. Wir nehmen uns mal dieses Script Container und ich schreibe hier hin, speicher den und dann gucken die Webseite noch mal an und dann passiert das, das L Art Fenster geht offensichtlich auf und Sie sehen hier einen URL und das ist Adresse von meinem Bild. Es hat offensichtlich etwas mit der Position zu tun, wo sich dieser Skipcontainer befindet. Das grundsätzliche Problem, was ich Ihnen versuche deutlich zu machen ist, dass man auch durchaus zu früh auf Dom Objekt zugreifen kann. Denn wenn Sie hier bereits auf ein Bild zugreifen wollen, der Befehl zum Verarbeiten von dem Bild aber vom Browser überhaupt noch nicht gesehen wurde, dann kann im Dom Baum dieses Objekt auch noch nicht da sein. In diesen RE ist dieses Objekt oder die Referenz auf dieses Objekt noch überhaupt nicht einsortiert und von daher haben wir hier den Wert undefined Grundsätzlich sollte man also entweder die Dom Zugriffe ans Ende der Webseite packen oder aber was noch besser ist überhaupt keine direkten Anweisungen in einen Scriptcontainer schreiben, wenn man auf Dom-Objekte zugreift, sondern immer nur aus Funktionen heraus diese Dom-Objekte ansprechen. Das heißt wenn Sie hier eine Funktion, nennen wir sie mal ''init'' schreiben , dann wird zwar diese Funktion oberhalb von diesem Objekt notiert, aber das ist ja kein Aufruf der Funktion, das ist nur eine Deklaration, von daher ist es unschädlich. Und der Funktionsaufruf gehört ans Ende der Webseite oder aber wenn der Dom fertig ist. Es gibt ein Eventhandler, der ein bisschen mit Vorsicht zu genießen ist, der nennt sich ''onload''. Und wenn man hier diese Funktion ''init'' reinschreibt, dann wird sie erst dann aufgerufen, wenn der Dom fertig ist. In der Vergangenheit gab es einigen Ärger mit diesem Eventhandler. Einige Browser hatten ihn nicht korrekt implementiert, in den neuen Browsern sollte er korrekt funktionieren, aber nichtsdestotrotz sollte man entweder mit diesem Eventhandler arbeiten oder noch besser in vielen Fällen wirklich den Aufruf von so einer Initialisierungsfunktion tatsächlich an das Ende der Webseite schreiben, damit sind Sie auf jeden Fall auf der sicheren Seite. Und das macht man in der Praxis tatsächlich. Ich habe hier die Quellcodes von einer sehr mächtigen und großen Seite aus der Praxis mir mal geholt und Sie sehen, wenn nicht ganz nach unten scrolle, ganz am Ende vor dem abschließenden Bodytec gibt es noch Skripte. Offensichtlich möchte man damit gewährleisten, dass man diese Scripte erst nach dem Laden der Webseite ausführt. Sogenanntes Frameworks im Umfeld von Ajax, lösen das Problem jetzt etwas eleganter, aber im Grunde solange Sie nicht hundertprozentig sicher sein können, dass der ''onload'' Eventhandler direkt ausgeführt wird, würde ich Zugriffe auf den Dom-Funktion packen, die ich erst am Ende der Webseite aufrufe. Wohlbemerkt, sofern es um Initialisierung geht, die also wirklich mit dem Laden der Seite verbunden sind. Alle die später erst durch Anwenderaktionen aufgerufen warden, die sind davon natürlich nicht betroffen.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!