JavaScript lernen

Generelle Zugriffsmöglichkeiten auf DOM-Objekte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die verschiedenen Möglichkeiten für den Zugriff auf die Elemente einer Webseite referenzieren letztlich alle das gleiche Objekt und stellen unabhängig von der Art des Zugriffs die gleichen Eigenschaften und Methoden bereit.
07:28

Transkript

In diesem Video wollen wir uns mit dem grundsätzlichen Zugriff auf Elemente in einer Webseite beschäftigen. Im Rahmen vom DOM-Konzept gibt es da verschiedene Möglichkeiten. Wir schauen uns mal diese Webseite hier an. In dieser Webseite gibt es zwei Bilder, und auf diese möchte ich zugreifen. Dazu wird eine Funktion mit "onload" aufgerufen namens "init", das heißt. wenn die Seite geladen ist, soll diese Funktion aufgerufen werden, und das wird sich so äußern: Die Seite wurde geladen, und hier gibt es einen kleinen Dialog, und hier steht die Adresse von diesem Bild drin. Und zwar im ersten Bild, in diesem Fall. Rein syntaktisch sieht diese Funktion "init" so aus: ein "alert" und das, was mich interessiert an der Stelle, hier gibt es eine Methode, die heißt "getElementsByTagName", eine Methode des DOM-Objektes "document". Diese Methode liefert einen Knoten, einen Node zurück, und zwar, genauer genommen, ein Array mit Nodes, denn wir haben hier ein Pluralform, "getElementsByTagName". Hier spezifiziere ich den Namen des Tags von dem Element, das ich suche, und Sie sehen hier eine Array-Notation, in eckigen Klammern wähle ich einen Index aus. Wenn ich hier die 0 hinschreibe, habe ich das erste Bild in der Webseite, schreibe ich hier eine 1 hin, habe ich das zweite. Dann wähle ich über Punktnotation die Eigenschaft "source", wobei das hier nicht im Fokus steht, die Zugriffsmethode ist interessant. Die Methode "document.getElementsByTagName" ist eine universell einsetzbare Methode, um in einer Webseite alle Elemente eines beliebigen Typs zu selektieren, ob das jetzt Bilder sind, DIV-Elemente, Formular-Elemente, Formulare selbst, Überschriften — vollkommen gleichgültig. Das ist aber nicht die einzige Möglichkeit, denn ich kopiere mir diese Zeile mal, kommentiere diese hier aus und wähle eine andere Syntax. Und wir schauen uns an, ob das Beispiel wieder funktioniert, wählen wir dieses Mal das zweite Bild. Und tatsächlich, jetzt habe ich das Bild b2.jpg. Das DOM-Konzept wurde ursprünglich von Netscape entwickelt, und Netscape hat bestimmte Elemente der Webseite in sogenannten Objektfeldern gesammelt, beispielsweise alle Bilder, wie Sie hier sehen, oder alle Formulare, alle Formularelemente, und noch einige andere. Das ist eine historisch sehr alte Syntax, mit der man über document Punkt Name des Objektfeldes — das ist eine Pluralform des konkreten Objektes, was Sie suchen, und an einem Index arbeiten können. Das geht etwa seit 1996, 95/96 bereits. Aber auch diese Form liefert im Grunde nur einen Node oder eine Sammlung von Node-Objekten zurück. Dann greift man genauso darauf zu, als hätte man sie hier mit "getElementsByTagName" selektiert. Tatsächlich können Sie aber bei diesen schon im ursprünglichen Netscape-Konzept vorhandenen Elementen auch den Namen nehmen, sobald es hier so ein Name-Attribut gibt, das heißt, auch das ging. In dem Fall würde ich dieses Bild hier selektieren, "document.", Name des Objektes und dann die gewünschte Eigenschaft. Das funktioniert, aber, wie gesagt, nicht bei allen Objekten, genauso wenig wie diese Objektfelder. Von dieser Variante mit dem Namen gibt es eine neuere Version, "getElementsByName". Das ist eine Methode, die auch über den Namen ein Objekt auswählt, einen Node auswählt. Beachten Sie, dass wir hier jetzt wieder eine Pluralform haben. Hier haben wir eine Singularform, das heißt, wir haben eindeutig ein Element gehabt. Nur kann ein Name in einer Webseite mehrfach benutzt werden. Stellen Sie sich vor, Sie haben zwei Web-Formulare, die voneinander getrennt sind, sich aber auf der gleichen Seite befinden, und in beiden taucht ein Eingabefeld "Name" auf. Dann haben Sie wirklich ein Problem, bei dieser Zugriffsform hier wird einfach ein Array geliefert, mit allen Elementen, wo das Attribut "name" entsprechend spezifiziert ist. Aber auch hier gilt, der Zugriff über den Namen funktioniert nur bei ausgewählten Elementen, ich würde davon abraten. Es gibt jetzt noch eine fünfte Form, die ich Ihnen zeigen möchte. Und das läuft über die sogenannte ID. Eine ID ist eine eindeutige Kennung eines Elementes in einer Webseite, sie sollte eindeutig sein. Wenn Sie sie nicht eindeutig machen in einer Webseite, dann machen Sie einen Fehler. Der Browser wird da irgendwie mit zurecht kommen, aber nicht vorhersehbar. Von daher ist es Ihre Verantwortung, eine ID in einer Webseite eindeutig für genau ein Element zu vergeben, auf das Sie später zugreifen wollen, entweder per CSS oder eben JavaScript. Wenn Sie das gemacht haben, dann können Sie auch über "getElementById" zugreifen. Und da es eindeutig ist, ist es wieder eine Singularform, sondern genau einen Node bekommen. Es ist übrigens keinerlei Zufall hier im Spiel, wenn ich die Groß- und Kleinschreibung so wähle, wie ich sie hier wähle, das ist die sogenannte Camel-Notation, Kamel-Notation, warum bloß die Höcker? Und diese erlaubt es, ziemlich eindeutig zu erkennen oder zu ahnen, wann ein Großbuchstabe und wann ein Kleinbuchstabe benutzt wird. Bei zusammengesetzten Worten wird immer das neu angefügte Wort mit einem Großbuchstaben begonnen, ganz einfach. Und im JavaScript im DOM-Konzept wir das konsequent durchgezogen. Was wir also in diesem Video gesehen haben, sind grundsätzlich unterschiedliche Möglichkeiten, um Elemente in einer Webseite zu selektieren. Sie sind alle gleichwertig, sofern sie funktionieren, aber zuverlässig funktionieren bei allen Elementen zumindest nur die Zugriffsmethoden über die ID oder die Methode "getElementByTagName", und ich empfehle dringend, sich auf diese beiden Methoden beim Zugriff zu beschränken.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

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!