Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

JavaScript Grundkurs

Was ist das DOM-Konzept?

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die DOM-Objektbibliothek kann mittels diverser Techniken genutzt werden und Kern der Überlegung ist, dass eine HTML-Seite als differenzierbare Struktur betrachtet wird und deren einzelne Bestandteile dynamisch zugänglich sind.
04:19

Transkript

In den Filmen dieses Abschnitts werden wir uns mit etwas beschäftigen, was Sie hier vor sich sehen. Das ist der Dom. Doch Sie brauchen keine Angst zu haben, Sie sind jetzt nicht in einem Training zu Architektur oder Kirchengeschichte. Es geht natürlich nicht um den Kölner Dom oder auch sonst einen Dom in der Eigenschaft als Kirche, sondern um ein Objektmodell. Es wird oft vorkommen, dass Sie in Ihren Java-Scripten selbst Objekte erzeugen oder Klassenelemente verbinden. Es wird so gut wie immer vorkommen, dass Sie in Ihrem JavaScript-Code Objekte benutzen, die Ihnen automatisch vom Browser zur Verfügung gestellt werden. Und diese Objekte basieren auf einem Objekt-Modell, das weder zu HTML noch zu JavaScript zählt, sondern ein eigenständiges Modell repräsentiert, das eben DOM, "Document Object Model", genannt wird. Es wird beim W3C mittlerweile standardisiert. Auf diese Objektbibliothek kann mit diversen Techniken zugegriffen werden, aber darunter ist natürlich auch JavaScript. Sie können aus einer Website heraus mit JavaScript auf dieses Objektmodell, dieses DOM-Modell, zugreifen. Doch was versteht man eigentlich darunter? Sie sehen hier, dass ich eine Webseite in Firefox geladen habe, und gleich auch Firebug noch einmal aufgemacht habe. Eine Website ist kein Bild, das im Browser angezeigt wird, sondern sie besteht aus unterscheidbaren Strukturen. Sie erkennen das hier, dass Sie hier so einzelne Bereiche haben, die so ineinander geschachtelt sein können. Und Sie sehen auch, dass das so eine Art Baumstruktur darstellt. Und auf dieser Baumstruktur können Sie in gewisser Weise auch navigieren. Der Kern des DOM-Konzeptes basierte anfänglich auf einer Überlegung, dass man beim Aufbau einer Website aus HTML sich die Bestandteile in irgendeiner Form merken kann. Es ist, wie gesagt, ja keine statische Struktur ohne einen Aufbau, sondern es sind unterscheidbare Strukturen, wie Sie auch hier sehen können. Die ursprünglichen Ideen stammen von Netscape. Die wurden mittlerweile aber so in alle verfügbaren Browser integriert, dass man eben über dieses DOM-Modell auch programmiertechnisch auf diese Bestandteile der Website zugreifen kann. Sie sehen, hier gibt es sogar ein eigenes Register "DOM". Um anzuzeigen, welche Eigenschaften und Methoden ein spezifisches Objekt, das man hier gerade selektiert hat, wirklich hat. Das DOM-Konzept ist eigentlich ein universelles. Es funktioniert im Grunde auf allen baumartig strukturierten Dokumenten wie beispielsweise auch XML. Aber wir brauchen es, zumindest im Moment, im Wesentlichen für HTML-Strukturen. Letztendlich wird jeder Browser beim Laden von einer HTML-Seite aus diesen Anweisungen eine baumartige DOM-Struktur aufbauen, die sich aber leider in verschiedenen Browsern unterscheiden kann. Nichtsdestotrotz kann man sie als Basis nehmen, um beispielsweise Bilder in der Webseite anzusprechen, auszutauschen, auf Formularelemente zuzugreifen oder Texte aus einem DIF, "Data Interchange Format", auszulesen, zu ändern oder auch im Layout zu verändern. Wenn man nun auf diesem DOM-Baum navigieren möchte, dann gibt es hier Beziehungen von Elementen zueinander. Man nennt diese einzelnen Verzweigungen hier "Knoten". Wer XML oder XPath kennt, wird diesen Begriff sowieso kennen. Es gibt hier einen Wurzelknoten. Knoten, die auf einer gleichen Ebene im Baum stehen, nennt man Geschwisterknoten. Die übergeordneten Strukturen sind die sogenannten Elternknoten. Und entsprechend, die untergeordneten nennt man Kindknoten. Solche Beziehungen werden über Objekte, die man im Quelltext ansprechen kann, und gewisse Methoden und Eigenschaften noch abgebildet und zugänglich gemacht. Merken Sie sich als Fazit aus diesem Film, dass Sie eine Webseite in unterscheidbare Strukturen unterteilen können, und der Browser das auch macht und diese Strukturen Ihnen beziehungsweise JavaScript zugänglich zur Verfügung stellen wird. Darauf basiert im Grunde die gesamte Leistungsfähigkeit von JavaScript.

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!