DOM
Aus ProgrammingWiki
| Wissen | Können | Projekt |
|---|---|---|
|
|
|
Das Domain-Object-Model (DOM) ist eine im Arbeitsspeicher befindliche Struktur, die den momentanen Zustand einer Webseite repräsentiert. Es handelt sich dabei um eine hierarchische Struktur, die dem Inhalt des body der Seite ähnelt. Im Falle statischer Webseiten gleichen die Strukturen einander (bis auf kleine Korrekturen die der Browser einfügt). Der Browser rendert den DOM unter Zuhilfenahme der CSS Definitionen um daraus sichtbaren Inhalt zu generieren. Daraus kann abgeleitet werden, dass durch Veränderung des DOM eine Änderung des angezeigten Inhalts bewirkt wird. Single-Page-Applications (SPA) nutzen ausschließlich diese Möglichkeit der DOM-Manipulation um dynamischen Seitenhalt zu produzieren. Die Browser-Umgebung stellt dazu das document Objekt bereit, welches den Einstiegspunkt in den DOM darstellt. Die Manipulationen werden mit Javascript realisiert.
Javascript benutzen
Neben HTML zur Strukturierung und CSS zur Formatierung bildet Javascript die dritte Säule von HTML5. Jegliche dynamische Änderung der Struktur des DOM wird mit Javascript bewerkstelligt. Auch Änderungen der Formatierungen sind entweder direkt, durch Manipulation der style Attribute, oder indirekt, durch Änderung der class von DOM-Elementen möglich. Um Javascript zu verwenden, muss in die HTML-Seite zumindest ein script Bereich integriert werden. Dieser kann direkt in der HTML-Datei mit Javascript Code gefüllt werden oder mittels src Attribut nur refernziert werden. In letzerem Fall wird der gesamte Inhalt der Datei als script Bereich interpretiert.
|
DOM Manipulation
Innerhalb eines jeden script Bereichs wird das document Objekt bereitgestellt. Dieses bietet diverse Funktionen um Elemente im DOM zu finden und Manipulationen vorzunehmen. Damit wird ermöglicht, dass auch HTML Definitionen mit leerem body dynamisch zu komplexen Webseiten umgewandelt werden.
|
jQuery
Mit jQuery wird ein Framework bereitgestellt, der die Programmierung von DOM-Manipulationen erleichtert. Es handelt sich hierbei um einen Aufsatz, der in seinem Kern ebenso die Manipulationsfunktionen des document Objekts benutzt, aber eine kürzere und zumeist verständlichere Programmierung erlaubt. Zur Einbindung von jQuery reicht es aus, wie auch bei jeder anderen Javascript Bibliothek, diese als externes script einzubinden. Die Online-Einbindung über ein Content-Delivery-Network (CDN), z.B. https://code.jquery.com/, ist ebenso möglich wie die lokale Einbindung der heruntergeladenen Javascript-Datei. In jedem Fall ist bei Einbindung mehrerer Bibliotheken auf die Reihenfolge der Einbindung zu achten.
Durch jQuery wird ein $ Objekt bereitgestellt, welches den Einstieg in jegliche jQuery-Funktionalität darstellt. Bei Benutzung dieses Objekts als Funktion und Übergabe einer entsprechenden Zeichenkette wird ein Ergebnisobjekt geliefert, dass "ein Stück DOM" repräsentiert. Bei Angabe von Selektoren werden die entsprechenden DOM-Elemente im Ergebnis geliefert. Jeglicher anderer Text wird in ein der DOM-Struktur-Syntax entsprechendes Element umgewandelt, welches aber zum Zeitpunkt der Erstellung noch kein Teil des DOM ist. Diese durch jQuery gelieferten DOM-Elemente stellen nun diverse Funktionen bereit um Manipulation vorzunehmen.
|
Events und Callbacks
Javascript Code, der unmittelbar im script Bereich implementiert ist, wird immer beim Laden des Skripts ausgeführt. Zu diesem Zeitpunkt ist u.U. das DOM noch nicht komplett aufgebaut und ein Selektor liefert damit womöglich noch kein Ergebnis. Um diesem Problem entgegen treten zu können, werden vom Browser Ereignisse ausgelöst. Auf diese Events kann reagiert werden indem eine Funktion definiert wird, die bei Auslösung des Events ausgeführt wird.
Neben dem document (für den Zugriff auf das DOM) steht im script Bereich immer ein window Objekt zur Verfügung. Dieses kapselt das Browser-Objekt-Model (BOM) und repräsentiert das aktuelle Fenster im Browser. Beide Elemente bieten u.a. Einstiegspunkte für die Event-Subscription, also die Registrierung zur Benachrichtung bei bestimmten Ereignissen. Eine solche Benachrichtigung erfolgt durch Aufruf einer bestimmten Funktion, wenn diese definiert ist. Wird die window.onload Funktion definiert (z.B. window.onload = function() { alert("onload"); };), so wird diese durch den Browser aufgerufen wenn die Seite fertig geladen und bereit zur Anzeige ist. Durch Platzierung sämtlicher Initialisierungen innerhalb einer solchen Funktion wird sichergestellt, das alle Elemente des DOM geladen wurden. (In den JSFiddle Beispielen ist dieser Ausführungszeitpunkt fest eingestellt)
Eine syntaktisch andere Form der Subscription wird durch die Funktion addEventListener bereitgestellt. Neben dem Namen des Events muss hier eine Funktion als Parameter übergeben werden. Diese Callback-Funktion wird dann bei Auslösung des Ereignisses ausgeführt. Die Funktion addEventListener steht an jedem DOM-Element zur Verfügung und dient somit nicht nur zur Registrierung globaler Ereignisse, sondern auch zur Reaktion auf Ereignisse an ganz bestimmten DOM-Elementen. Das jQuery Objekt bietet mit der Funktion on eine ähnliche Funktionalität. Zusätzlich gibt es auch verkürzte Varianten wie click oder mouseover bei denen der Ereignistyp vorbestimmt ist.
|
Projekt und weitere Übungen
Führen Sie die Dokumentation und das Spielfeld in einer HTML Datei zusammen und regeln Sie die Seitenumschaltung nun durch Manipulation des DOM. Wird in ein Sudoku-Feld geklickt, so soll es hervorgehoben werden, wobei natürlich immer nur ein Feld hervorgehoben sein soll. Entwerfen Sie außerdem eine geeignete Eingabevalidierung für die Sudoku-Felder. Fügen Sie dem Spielfeld einen Start-Button hinzu und füllen Sie bei Klick das Spielfeld mit zufälligen Zahlen komplett aus.
Beispiellösung | WE1-P5.zip (0.1 MB) |
- Installieren Sie (lokal) auf Ihrem Laptop das Firefox-AddOn "DOM Inspector". Analysieren Sie die DOM-Struktur eines einfachen HTML-Dokuments. Verwenden Sie auch Elemente mit Attributen.
- Verwenden Sie Firefox und öffnen Sie die Entwicklerwerkzeuge. Suchen Sie sich im Inspektor (nicht DOM Inspector) ein DOM-Element mit einer ID aus, die Sie sich merken. Wechseln Sie zur Konsole und geben Sie ein: document.getElementById("IhreGemerkteID") . Führen Sie in dieser Browser-Umgebung ganz ähnliche Navitations- und Modifkationsexperimente durch wie Sie das im Tutorial gemacht haben.
- DOM-Manipulationen werden in Echtzeit ausgeführt. Entwerfen Sie ein HTML-Dokument nach eigenen Intentionen, das per Knopfdruck schnelle Farbwechsel an verschiedenen Stellen des Dokuments, verschwindenden bzw. erscheinenden Text und weitere spektakuläre Effekte offeriert. Verwenden Sie HTML(5), CSS und jQuery.
- Ersetzen Sie die Knöpfe zum Auslösen der Effekte aus der vorherigen Aufgabe durch Events. Stellen Sie sich jeweils passende Anwendungsfälle vor.
- Machen Sie sich mit den in der Vorlesung aufgezeigten Technologien der Eingabeverifizierung vertraut, indem Sie mit den entwickelten Dokumenten experimentierten und diese modifizieren, um die sich daraus ergebenden Effekte zu beobachten. Den Einsatz von JavaScript sollten Sie dabei auf ein Minimum beschränken, da noch nicht bekannt.
