Grundlagen der Programmierung: Basiswissen

Document Object Model

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Document Object Model bezeichnet den schematischen Aufbau einer Webseite. Programmiersprachen, welche dieses Model verwenden, können daher auf Webseiten und deren Bestandteile zugreifen.

Transkript

JavaScript ist eine Script-Sprache, keine Allrounder-Sprache. Seine Welt, ist die der Webseite, die es geladen hat. Nicht das Betriebssystem und auch nicht die Hardware hier. Dafür hat es aber auch einige hervorragende Möglichkeiten, um auf eine Webseite und ihre Bestandteile zuzugreifen. JavaScript verwendet dafür ein eigenes Modell, das sogenannte "Document Object Model". Das heißt auch im Deutschen so; die Abkürzung dafür lautet: DOM oder d o m. Um das näher zu erklären, muss ich ein bisschen über HTML und Webseiten als solche reden. Das hat zwar nichts mit allgemeiner Programmierung zu tun, aber sehr viel mit JavaScript. Wir haben uns ja für JavaScript entschieden, um an diesem Beispiel die Programmiergrundlagen kennenzulernen. Wir haben viel mit Alert-Boxen, diesen kleinen nervigen Dingern, gearbeitet. Normalerweise, draußen in der freien Wildbahn, verwendet man diese Alert-Boxen nur sehr selten und ich glaube, das ist auch ganz gut so. Aber vielmehr geht es darum, normalerweise, irgendwie anders mit einer Webseite zu interagieren. Und dafür brauchen wir eben dieses Document Object Model, das DOM. Was ist das eigentlich, dieses Modell? Ist das eine Sprache? Ist das Teil von JavaScript? DOM ist eigentlich nur so eine Idee. Am leichtesten zu verstehen ist es, wenn wir uns die drei Wörter einzeln anschauen. Document, Object, Model. Fangen wir mit dem ersten an. Was ist denn eigentlich mit einem Document, mit einem Dokument gemeint? In Microsoft Word z.B. ist ein Dokument eine einzelne Datei. Hier aber nicht, denn wir sind ja gerade auf einer Webseite. Für uns ist ein Dokument eine einfache Webseite, wie wir es hier gerade in einem Browser sehen: "Learning Java Script; Java Script is a language that runs in the browser, simple but powerful and misunderstood." Und dieses Dokument gibt es in verschiedenen Ausführungen. Wir sehen rechts einmal das, wie es ein Website-Besucher sehen würde, und links, da sehen wir den eigentlichen Quelltext mit den einzelnen HTML-Tags, wie HTML-Head usw. Das ist unser gesamtes Dokument. Das fängt normalerweise bei <html an und hört ganz unten bei </html auf. Je nachdem, ob wir es mit einem Editor anschauen, sehen wir den Quelltext; oder, wenn wir es in einem Browser anschauen, dann sehen wir wie das Ganze eigentlich aussehen sollte. Dieses Dokument besteht aus einzelnen Objekten. Diese Objekte sind z.B. die Überschrift "Learning JavaScript", oder eine Liste mit einzelnen Spiegelstrichen oder einzelnen Punkten, oder auch das gesamte Dokument das ist ein einzelnes Objekt. Und wenn wir uns das Gleiche nochmal anschauen im Quelltext, dann sehen wir hier dieselben Objekte. Wir haben "<h1 Learning JavaScript </h1" was später dann groß und fett ausgegeben wird; wir haben unsere Liste mit den einzelnen Spiegelstrichen <UL ist übrigens die Abkürzung für "Unordered List" und <LI für "List Item", also wir können hier einfach eine Liste erstellen oder eben das gesamte Dokument, das bei html anfängt und aufhört, auch das ist ein einzelnes Objekt. Fehlt als Drittes noch das eigentliche Modell und dieses eigentliche Modell, das sind die Vereinbarungen, das sind die Konventionen, die wir über die Einzelteile, über die einzelnen Objekte unserer Webseite treffen. Wenn man das zusammenfasst, dann haben wir eben unser Document Object Model oder kurz DOM. Mit anderen Worten: Das DOM, das bedeutet alle Vereinbarungen, alle Namenskonventionen, was kann was, was muss wo hingeschrieben werden; diese Vereinbarungen über die Einzelteile einer Webseite, sind nichts anderes als dieses Document Object Model. Und es ist wichtig, das zu kennen, wenn wir mit JavaScript arbeiten. Lassen Sie mich Ihnen ein einfaches Beispiel zeigen. Ich habe hier in meinen Projekt-Dateien die beiden bekannten Dateien container.html und script.js und wenn ich jetzt auf container.html draufklicke, dann habe ich hier eine etwas andere Seite als sonst; ich habe hier eine ganz tolle Überschrift eingefügt. Schauen wir uns das Ganze im Quelltext an ich öffne das hier in meinem Editor. Und da sehen Sie: Da habe ich hier ganz normal meinen <head und meinen <body, so wie sonst auch, aber etwas Neues ist jetzt hier, und zwar dieses: <h1 id="mainHeading" </h1 und dann "Tolle Überschrift". Das hier ist der Quellcode für genau die Seite, die wir uns hier gerade angesehen haben, also diese "tolle Überschrift" wird hier in fett und in groß dargestellt, und die HTML-Repräsentation davon, das ist dieses: <h1 "Tolle Überschrift" </h1 . Was das Besondere hierbei jetzt ist, das ist dieses: id="mainHeading" Dieses "mainHeading" ist ein Name, den ich selber vergeben habe; weil es eine ID ist, habe ich entschieden, das auf Englisch zu machen, Sie können auch jeden beliebigen Namen verwenden, den Sie möchten. Dieses "id", das ist quasi eine Art Label, eine Art Name für diesen einen HTML-Bereich, für diesen einen HTML-Tag. Und diesen Namen müssen wir vergeben, damit wir später in JavaScript darauf zugreifen können. Das machen wir jetzt, hier unten wird ja das JavaScript File eingebunden; das öffne ich jetzt auch hier in meinem Editor. Das ist noch ganz leer. Und was ich jetzt mache ist: Ich möchte auf das Document Object Model, also auf das DOM dieser Seite, von der das JavaScript aufgerufen worden ist, zugreifen. Ich erzeuge eine Variable, die nenne ich mal "headline". Ich nenne sie extra nicht "Überschrift", weil ich bei Variablen-Namen keine deutschen Umlaute verwenden darf; ich könnte natürlich mit "ue" arbeiten. Jetzt greife ich auf das Dokument, das mich als JavaScript aufgerufen hat, zu und das mache ich, indem ich schreibe "document." und dann greife ich auf ein bestimmtes Element innerhalb dieses Document Object Models zu. Und das mache ich mit "get element by id", also ich hole mir ein Element, abhängig von der ID. Das ist eine Funktion, also: runde Klammer auf, Anführungszeichen und dann schreibe ich den Namen, den ich hier vergeben habe, nämlich: "mainheading". Ich mache es mir einfach und kopiere und setze ihn hier ein, damit ich keinen Tippfehler habe. Und jetzt habe ich dieses Element, diese Überschrift in meiner Variablen headline hier gespeichert. Was ich jetzt als Nächstes mache, ist, ich schreibe "headline" und dann sage ich InnerHTML. InnerHTML: Ich möchte das, was innerhalb dieses h1-Elementes steht, verändern und ich schreibe z.B. ="Ha, das ist eine andere Überschrift;". Strichpunkt nicht vergessen und speichere ich das Ganze nochmal ab "Sichern", und führe das aus. Und dann sehen Sie hier: "Ha, das ist eine andere Überschrift". Wir haben nichts am eigentlichen Container-HTML, am eigentlichen Quelltext verändert, sondern was wir hier unten haben ist: Wir binden ein JavaScript ein; und dieses JavaScript, das verändert dann die Seite nach dem sie geladen worden ist. Jede Programmiersprache hat ihre besonderen Eigenschaften, ihren besonderen Nutzen, und bei JavaScript geht es ja darum, dass wir eine HTML-Seite verändern und genau das haben wir jetzt hier gemacht. Wir können mit JavaScript natürlich noch viel, viel mehr an einer Seite verändern. Wir können nicht nur die Überschrift ändern, die Inhalte der Seite ändern. Wir können Grafiken ändern, die Farben ändern und wir können mehr oder weniger alles, was eine HTML-Seite ausmacht, auch mit JavaScript manipulieren.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 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!