JavaScript lernen

Was ist das DOM-Konzept?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Kern des DOM-Konzept basiert auf einer Überlegung, die eine HTML-Seite nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit, sondern als differenzierbare Struktur betrachtet. Damit werden deren Bestandteile dynamisch zugänglich, sofern es eine Syntax für den Zugriff gibt.
05:36

Transkript

In diesem Video wollen wir uns mit dem DOM-Konzept beschäftigen, einem der wichtigsten Konzepte überhaupt, wenn Sie in JavaScript programmieren wollen. Das DOM-Konzept erlaubt es, eine Webseite als unterscheidbare Struktur zu verstehen, die man programmiertechnisch ansprechen kann. Betrachten wir hier mal eine typische Webseite. Das ist zwar ein Blog, aber letztendlich doch eine typische Webseite mit einer gewissen Struktur. Das ist das, was der Besucher der Webseite sieht. Aber das ist das, was der Browser als Objektstruktur hinter dieser Seite erkannt hat. Ich benutze hier ein Add-on von Firefox, das sich DOM Inspector nennt und das eben genau diese unterscheidbare Struktur der Webseite darstellt. Und es ist kein Zufall, dass Sie hier eine baumartige Struktur erkennen baumartige Struktur, wo man in bestimmte Strukturen immer tiefer einsteigen kann. So, als würde man die Äste in einem Baum entlang klettern. Wobei Sie den Begriff der Verzweigung dieser Äste sich gleich merken sollten. Man nennt das Knoten, oder Englisch: nodes. Allgemein versteht man unter dem Document Object Model, was DOM ausgeschrieben bedeutet, eine Spezifikation für eine Schnittstelle, um einen Zugriff auf HTML- oder XHTML-Dokumente zu gewährleisten allgemein baumartig strukturierte Dokumente. Und das DOM-Konzept wird beim W3C standardisiert. Das DOM-Konzept ist die Grundlage dessen, dass Sie mit JavaScript überhaupt irgendetwas machen könnten, denn ohne die Möglichkeit, auf diese DOM-Objekte zuzugreifen, könnten Sie mit JavaScript nicht einmal banalste Ausgaben, geschweige denn Interaktionen mit dem Anwender oder gar Multimedia Geschichten wie Animationen, machen. Die gesamte JavaScript-Programmierung basiert darauf, dass Sie DOM-Objekte manipulieren. Und dazu ist es notwendig, dass Sie gewisse Objekte von der Bedeutung her kennen. Es gibt z.B. das Objekt "Window". Dieses steht für das Anzeigenfenster des Browsers. Und dieses Objekt bietet einige interessante Methoden, bspw. eine Methode "alert()". "Window.alert()" zeigt ein kleines Dialogfenster an. Man kann allerdings die Methoden von Window in der Regel ohne Punktnotation benutzen, D.h., Sie müssen "Window" nicht voranstellen. "Window.alert()", "Window.confirm()", ein Dialogfenster zur Bestätigung mit "OK" und "Abbrechen", "Window.(prompt), um Benutzereingaben entgegenzunehmen. Es ist sozusagen die Mutter der Kompanie. Darunter gibt es z.B. ein Objekt "Frame", das als sogenannte Objekt-Felder in der Regel benutzt wird, dann sind es mehrere Frames, die sich in einem Fenster befinden können. Das wohl wichtigste Unterobjekt von Window heißt "Document". Mit Document repräsentieren Sie die Webseite selbst und damit kommen Sie an die Inhalte in einer Webseite. Sie können in die Webseite schreiben, Sie können einzelne Elemente in dieser Webseite verändern. Das Objekt "Node", Sie erinnern sich an den Baum, ist eine Repräsentation aller Knoten in diesem Element "Baum". Man schreibt allerdings dieses Objekt niemals hin, sondern man bekommt Node-Objekte geliefert, etwa über Methoden, wie "getElementById()", "getElementsByTagNames()", und ähnliche Dinge. Es ist aber wie gesagt eine Repräsentation sämtlicher interessanten Bestandteile in einer Webseite, wobei man die Knoten auch nach ihrem Typ unterscheiden kann. Es gibt einen Dokumentknoten, es gibt Elementknoten, es gibt Attributknoten, es gibt Textknoten und noch weitere, die allerdings in der Webprogrammierung nicht so entscheidende Bedeutung haben XTML hingegen schon. Dann gibt es ein Objekt "Style", darüber kommen Sie an alle CSS-Attribute von Elementen in einer Webseite, oder ein Objekt "Form", das ist die Repräsentation von Formularen. "Element" ist ein Element in einem Formular, und "Option" ist für ganz bestimmte Formularelemente, nämlich Auswahllisten einer Repräsentation. Ein Objekt "Image" ist eine Repräsentation aller Bilder, bzw. konkret ein Bild, und wenn man das Objektfeld "Images" betrachtet, aller Bilder. Das Event-Objekt ist für Anwenderereignisse zuständig, D.h., sobald ein Ereignis eintritt, wird so ein Objekt erzeugt. Das kann man gezielt verwerten. Mit dem Objekt "History" kommen Sie an die Historie des Browsers. Das ist also etwas, was man ja nicht sieht, aber was durchaus von der Programmierung her interessant ist, anzusteuern. "Location" ist ein Objekt, worüber Sie die Adresszeile des Browsers ansprechen können. "Navigator" ist eine Repräsentation des Browsers von seinen Metainformationen her, also was ist das für ein Browser, was für eine Versionsnummer, was für eine Einstellung der Sprache, und Ähnliches. Und "Screen" ist ein Objekt, das den Bildschirm des Besuchers repräsentiert. Darüber hinaus gibt es noch einige weitere Objekte, aber was Sie hier gesehen haben, sind die wichtigsten Objekte im DOM-Konzept, worauf fast sämtliche interessanten praktischen Anwendungen von JavaScript basieren. Sie sollten also nun verstanden haben, was das DOM-Konzept darstellt und auch in einer kleinen Übersicht die Namen der wichtigsten DOM-Objekte schon mal gehört haben.

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!