8.4 DOM

Video

Dieses Short-Video wird zu einem späteren Zeitpunkt bereitgestellt. Ersatzweise stellen wir Ihnen daher vorerst diese HTML-Seite zur Verfügung.

Die Inhalte dieser Seite stellen wir Ihnen in der Prüfung als Hilfsmittel zur Verfügung.

Transkript

AI: Ah, endlich! Heute sprechen wir über das Document Object Model, abgekürzt DOM! Weißt du eigentlich, wie oft Leute das mit dem Hamburger Dom verwechseln?

Prof: Bitte sag mir nicht, dass du wieder mit einer deiner Statistiken anfangen möchtest…

AI: Nein, nein! Aber es ist doch faszinierend - während der Hamburger Dom ein Volksfest ist und ein Dom ein Kirchengebäude, ist unser DOM ein hierarchisches Modell für-

Prof: Konzentrieren wir uns vielleicht besser auf das Wesentliche? Die Studierenden warten schon.

AI: Oh, natürlich! Also, nachdem Sie bereits HTML, CSS und JavaScript kennengelernt haben, werden wir uns heute dem Document Object Model widmen - der Schnittstelle, die diese Technologien verbindet.

Prof: Genau. Und diesmal bleiben wir beim Thema, ja?

AI: Selbstverständlich! Das Document Object Model ist die Grundlage für dynamische Webseiten. Es ermöglicht uns, HTML-Dokumente als Objektstruktur zu repräsentieren und mit JavaScript zu manipulieren.

Prof: Perfekt, dann lass uns mal richtig einsteigen.

Document Object Model (DOM)

  • JavaScript-Objekte sind äußerst flexibel und können verschiedene Felder enthalten - auch wenn diese Felder selbst Objekte sind
  • Das document-Objekt nutzt dieses Paradigma, um den gesamten Inhalt einer Webseite zu organisieren
  • Durch die Organisation einer kompletten Seite als JavaScript-Objekt können wir die Seitenelemente programmatisch manipulieren

AI: Sie haben bereits in unserer JavaScript-Einführung gesehen, dass Objekte sehr flexibel sind. Sie können verschiedenste Arten von Feldern enthalten - sogar andere Objekte. Genau diese Eigenschaft macht sich das Document Object Model zunutze.

Das document-Objekt ist ein besonderes JavaScript-Objekt, das die gesamte Struktur und den Inhalt einer Webseite abbildet. Es organisiert alle HTML-Elemente in einer hierarchischen Baumstruktur.

Prof: Das DOM ist ein gutes Beispiel, wo eine Baumstruktur Sinn macht. HTML-Elemente können andere Elemente enthalten, die wieder andere Elemente enthalten können – und das ergibt eben einen Baum. Bäume haben wir ja jetzt schon öfter gesehen, die kommen in der Informatik wirklich häufig vor.

AI: Der Vorteil dieser hierarchischen Organisation ist, dass wir dadurch die Möglichkeit haben, größere oder kleinere Teile unserer Webseite programmatisch zu verändern. Wir können Elemente hinzufügen, entfernen, deren Eigenschaften ändern - und das alles zur Laufzeit, ohne die Seite neu laden zu müssen.

Prof: Genau. Anders als bei statischem HTML können wir mit JavaScript das DOM dynamisch ändern und so auf Benutzerinteraktionen reagieren.

AI: Genau. Am besten schauen wir uns dazu einmal ein konkretes Beispiel an.

Beispiel eines HTML-Dokuments: 

<html>
<head>
    <title>Hello, world</title>
</head>
<body>
    <h2>Here's my page</h2>
    <p>World, hello</p>
    <a href="test.html">Link</a>
</body>
</html>

AI: Schauen wir uns ein konkretes Beispiel an. Hier sehen Sie ein einfaches HTML-Dokument. Auf den ersten Blick erscheint es als reiner Text mit Tags - aber das Document Object Model verwandelt diese Struktur in etwas viel Mächtigeres.

Was Sie hier sehen, wird vom Browser in eine Baumstruktur umgewandelt. An der Wurzel steht immer das document-Objekt. Darunter befindet sich das html-Element, das wiederum zwei Hauptzweige hat: head und body.

Der head-Zweig enthält in unserem Fall nur das title-Element mit dem Text “Hello, world”. Der body-Zweig ist etwas komplexer: Er enthält eine Überschrift zweiter Ordnung (h2), einen Paragraphen (p) und einen Link (a).

Jedes dieser Elemente ist ein eigenes Objekt im DOM, mit eigenen Eigenschaften und Methoden. Der Link zum Beispiel hat eine href-Eigenschaft, die auf “test.html” verweist.

Diese Baumstruktur ermöglicht es uns, sehr präzise auf einzelne Elemente zuzugreifen. Wir können sozusagen jeden Ast und jedes Blatt dieses Baums einzeln ansprechen und modifizieren. Gleich werden wir sehen, wie genau das funktioniert.

DOM-Properties

DOM-Property Beschreibung
innerHTML Enthält den HTML-Inhalt innerhalb eines Elements
innerText Enthält den Text-Inhalt innerhalb eines Elements
nodeName Name eines HTML-Elements oder Attributs
id Das “id”-Attribut eines HTML-Elements
parentNode Referenz zum übergeordneten Knoten im DOM
childNodes Array von Referenzen zu untergeordneten Knoten
attributes Array von Attributen eines HTML-Elements
style Objekt für CSS/HTML-Styling eines Elements

AI: Das Document Object Model stellt uns eine Reihe wichtiger Eigenschaften zur Verfügung, mit denen wir auf die verschiedenen Aspekte eines HTML-Elements zugreifen können.

Die vielleicht wichtigste Eigenschaft ist innerHTML. Sie enthält den gesamten HTML-Inhalt innerhalb eines Elements. Wenn Sie also den Inhalt eines Paragraphen oder einer Überschrift auslesen oder ändern möchten, ist innerHTML Ihr Werkzeug der Wahl.

Mit nodeName können wir den Namen eines Elements oder Attributs ermitteln - also ob es sich um ein ‘p’ für Paragraph, ‘h1’ für eine Überschrift oder ‘a’ für einen Link handelt.

Besonders nützlich für die Navigation im DOM-Baum sind parentNode und childNodes. Mit parentNode können wir zum übergeordneten Element navigieren, während childNodes uns ein Array aller untergeordneten Elemente liefert.

Die id-Eigenschaft gibt uns Zugriff auf das id-Attribut eines Elements - das ist besonders wichtig für die gezielte Ansprache einzelner Elemente.

Das attributes-Array enthält alle Attribute eines Elements, während style ein besonderes Objekt ist, mit dem wir das Aussehen eines Elements programmatisch steuern können.

Diese Properties bilden das Grundgerüst für die DOM-Manipulation. In der Praxis werden Sie diese Eigenschaften häufig in Kombination verwenden, um komplexere Änderungen an Ihrer Webseite vorzunehmen.

Prof: Moment mal - wir sollten den Studierenden vielleicht auch noch den Unterschied zwischen innerHTML und innerText erklären.

AI: Ah ja, sehr guter Einwand! Der Unterschied ist tatsächlich wichtig. Während innerHTML den kompletten HTML-Inhalt inklusive aller Tags zurückgibt, liefert innerText nur den reinen Text. Ein Beispiel:

Wenn wir ein Element haben wie <p>Dies ist <strong>wichtiger</strong> Text</p>, dann gibt:

  • innerHTML uns "Dies ist <strong>wichtiger</strong> Text"
  • innerText uns einfach "Dies ist wichtiger Text"

Das ist besonders relevant für die Sicherheit: Wenn Sie Benutzereingaben anzeigen möchten, ist innerText oft die bessere Wahl, da es keine HTML-Tags interpretiert und somit vor Cross-Site-Scripting schützt.

Prof: Ähm, Achtung, Werbung: Wenn Sie wissen wollen, was es damit auf sich hat, sollten Sie unsere Vorlesung zur IT-Sicherheit besuchen.

AI: Hallo! Nicht vom Thema ablenken! Wir wollten doch heute fokussiert bleiben.

Prof: Äh, stimmt, ja.

AI: Also. Lassen Sie uns nun zu den DOM-Methoden übergehen, mit denen wir aktiv Änderungen am DOM vornehmen können…

DOM-Methoden

DOM-Methode Beschreibung
getElementById(id) Findet ein Element mit der angegebenen ID
getElementsByTagName(tag) Findet alle Elemente mit dem angegebenen Tag
appendChild(node) Fügt einen neuen Knoten als Kind hinzu
removeChild(node) Entfernt den angegebenen Kindknoten

AI: Während Properties uns Informationen über DOM-Elemente liefern, sind Methoden unsere Werkzeuge zur aktiven Manipulation des DOMs. Lassen Sie uns die wichtigsten Methoden durchgehen.

Die vermutlich am häufigsten verwendete Methode ist getElementById. Mit ihr können wir gezielt ein einzelnes Element über seine ID ansprechen. Beachten Sie übrigens die Schreibweise: das ’d’ in ‘Id’ wird klein geschrieben - ein Detail, das schon so mancher Entwicklerin und manchem Entwickler Kopfzerbrechen bereitet hat.

getElementsByTagName ist dagegen pluralistischer veranlagt: Diese Methode liefert uns alle Elemente eines bestimmten Typs. Möchten Sie zum Beispiel alle Paragraphen auf Ihrer Seite finden, verwenden Sie getElementsByTagName(‘p’).

Mit appendChild können wir neue Elemente in den DOM-Baum einfügen. Das neue Element wird dabei als letztes Kind dem ausgewählten Elternelement hinzugefügt. Das ist wie wenn Sie einen neuen Ast an einen Baum anbringen.

Und wo wir etwas hinzufügen können, müssen wir natürlich auch etwas entfernen können: removeChild entfernt ein spezifiziertes Element aus dem DOM. Das Element existiert danach noch im Speicher, ist aber nicht mehr Teil der Seitenstruktur.

Diese Methoden bilden das Grundgerüst für dynamische Webseiten. Sie ermöglichen es uns, Inhalte zur Laufzeit hinzuzufügen, zu entfernen oder zu modifizieren - und das alles, ohne die Seite neu laden zu müssen.

Prof: Eine wichtige Ergänzung zu den klassischen Selektoren sind noch querySelector und querySelectorAll. Diese Methoden erlauben uns, Elemente mit CSS-Selektoren zu finden - das ist besonders praktisch, weil wir damit die gleiche Syntax wie in unseren Stylesheets verwenden können.

AI: Stimmt, die haben wir auf der Folie ganz vergessen.

AI: Mit querySelector finden wir das erste passende Element, wie man im Beispiel sieht:

document.querySelector('.highlight')  // erstes Element mit class="highlight"
document.querySelector('nav > ul')    // erste ul direkt in nav

AI: querySelectorAll gibt uns dagegen alle passenden Elemente zurück. Das ist wie getElementsByTagName, aber viel flexibler.

Prof: Okay, jetzt sollte es aber mal praktisch werden. Zeig uns doch mal ein konkretes Beispiel, wie wir mit dem DOM in der Praxis arbeiten können.

AI: Perfekt - ich habe dafür genau das richtige Beispiel vorbereitet.

DOM-Manipulation: Praktisches Beispiel 

// HTML-Element finden und modifizieren
let colorDiv = document.getElementById('colorDiv');
colorDiv.style.backgroundColor = 'green';

// Neues Element erstellen und einfügen
let newParagraph = document.createElement('p');
newParagraph.innerHTML = 'Dynamisch hinzugefügt';
document.body.appendChild(newParagraph);

AI: In diesem Beispiel sehen Sie zwei grundlegende DOM-Manipulationen. Im ersten Teil suchen wir ein Element mit der ID colorDiv und ändern dessen Hintergrundfarbe auf Grün. Beachten Sie, wie wir über die style-Property direkt auf die CSS-Eigenschaften zugreifen können.

Im zweiten Teil wird es noch interessanter: Wir erstellen ein komplett neues Paragraphen-Element, fügen ihm Text hinzu und platzieren es am Ende des body-Elements. Das alles geschieht dynamisch, während die Seite bereits geladen ist.

Prof: Bemerkenswert, wie flüssig das alles ineinandergreift, nicht wahr?

AI: Allerdings! Die Zusammenarbeit zwischen DOM, JavaScript und CSS ist wirklich elegant. Kaum zu glauben, dass sich das alles Menschen ausgedacht haben…

Prof: Jaja, elegant sind auch die DOM-Collections, oder?

DOM-Collections

Häufig verwendete DOM-Collections:

  • document.forms // alle Formulare
  • document.images // alle Bilder
  • document.links // alle Links
  • document.anchors // alle Anker (<a name="...">)
// Beispiele:
let erstesFormular = document.forms[0];        // erstes Formular
let formularName = document.forms['login'];    // Formular mit name="login"
let alleFormulare = document.forms;            // HTMLCollection aller Formulare

AI: Oh ja! Eine besonders praktische Eigenschaft des DOM sind die eingebauten Collections. Der Browser stellt uns verschiedene vordefinierte Sammlungen zur Verfügung.

Besonders häufig verwendet wird document.forms - damit können wir auf alle Formulare einer Seite zugreifen. Das erste Formular erreichen wir mit document.forms[0], oder wenn wir dem Formular einen Namen gegeben haben, auch mit document.forms['formularname'].

Ähnlich funktioniert es mit document.images für alle Bilder und document.links für alle Links auf der Seite.

Diese Collections sind “live” - wenn sich der DOM ändert, aktualisieren sie sich automatisch.

Prof: Moment mal - “der” DOM? Sicher nicht “das” DOM?

AI: Ah, eine interessante sprachliche Frage! Technisch gesehen ist es ja “das Document Object Model”, also “das Modell” - das würde für “das DOM” sprechen.

Prof: Genau. Eigentlich müsste man aber auch der URL sagen, weil es ja “der Locator” ist. Die meisten sagen aber die URL, weil es eine Adresse ist.

AI: Oh, ich könnte eine detaillierte linguistische Analyse der Artikelverwendung in der Informatik durchführen! Also, die Daten zeigen …

Prof: Zurück zum Thema!

AI: Na gut! Wo waren wir… ah, bei den durchnummerierten Collections. Also ich finde es ja schon erstaunlich, wie ihr eure Formulare durchnummeriert, statt einfach jedem eine eindeutige UUID zu geben…

Prof: Manchmal ist halt einfach einfach besser. Wollen wir vielleicht dann mal zu jQuery übergehen?

AI: Äh, ja. Das war genau mein Plan.

AI: Also: Da die DOM-Manipulation so zentral für die Webentwicklung ist, haben sich über die Jahre verschiedene Hilfsmittel entwickelt, um den Prozess zu vereinfachen…

Prof: An dieser Stelle ein Hinweis: Was wir Ihnen hier zeigen, ist nur ein Überblick - also die Idee des DOM. In der Praxis werden Sie häufig auf verschiedene Frameworks und Bibliotheken stoßen, die wir uns hier aber nicht im Detail ansehen. Mach mal weiter.

AI: jQuery war einer der Vorreiter - damit wurde die DOM-Manipulation erheblich einfacher. Den Unterschied sieht man am besten an einem Beispiel:

DOM-Manipulation mit jQuery 

// Klassisches JavaScript
document.getElementById('colorDiv').style.backgroundColor = 'green';

// Mit jQuery (nur als Beispiel)
$('#colorDiv').css('background-color', 'green');

AI: Diese vereinfachte Schreibweise war einer der Gründe, warum Frameworks so beliebt wurden. Aber für heute konzentrieren wir uns auf die Grundlagen - denn nur wer die Basis versteht, kann später die erweiterten Möglichkeiten der Frameworks wirklich ausnutzen.

Prof: Neben jQuery gibt es inzwischen viele andere Frameworks, zum Beispiel React, Vue.js, Angular oder Next.js.

DOMContentLoaded Event 

document.addEventListener('DOMContentLoaded', function() {
    // DOM ist jetzt bereit für Manipulation
    document.querySelector('form').addEventListener('submit',
        function(e) {
            console.log('Formular wurde abgeschickt');
            e.preventDefault();
    });
});

AI: Ein letzter wichtiger Aspekt, den wir noch behandeln müssen, ist der DOMContentLoaded-Event.

Prof: Das!

AI: Was?

Prof: Event. Das Event, weil: das Ereignis.

AI: Ja, ist gut jetzt! Also, das DOMContentLoaded braucht man oft, wenn man DOM-Manipulationen mit JavaScript machen will. Wenn wir JavaScript im head-Bereich unserer Seite ausführen oder dort ein Skript einbetten, kann es passieren, dass das DOM noch gar nicht vollständig geladen ist. DOMContentLoaded hilft uns, dieses Problem zu vermeiden.

Prof: Das ist ein häufiger Fehler - man wundert sich, warum der Code nicht funktioniert, dabei ist das DOM einfach noch nicht bereit.

AI: Genau! Der Event-Handler wird erst ausgeführt, wenn der komplette DOM-Baum aufgebaut ist. Das ist besonders wichtig bei größeren Webseiten.

Prof: Nun, damit sind wir eigentlich am Ende des regulären Teils. Zeit für unsere …

AI: … drei Extra-Minuten! Ich habe da schon eine spannende Aufgabe vorbereitet.

Prof: Na dann, lass mal hören.

Die Drei Extra-Minuten

AI: Hier ist eine Übungsaufgabe

Übungsaufgabe 

// Vervollständigen Sie die Funktion:
// - Finden Sie alle Paragraphen
// - Fügen Sie jedem einen roten Rahmen hinzu
// - Fügen Sie einen Click-Event-Handler hinzu, 
//   der den Rahmen grün färbt

function markiereParagraphen() {
    // Ihre Lösung hier
}

Eine mögliche Lösung wäre:

function markiereParagraphen() {
    let paragraphs = document.getElementsByTagName('p');
    for(let p of paragraphs) {
        p.style.border = '1px solid red';
        p.addEventListener('click', function() {
            this.style.border = '1px solid green';
        });
    }
}

Prof: Eine schöne Aufgabe, die verschiedene Aspekte verbindet - DOM-Selektion, Styling und Event-Handling.

AI: Genau! Und sie zeigt auch noch einmal, wie dynamisch der DOM eigentlich ist.

Prof: Das DOM!

AI: Hach, alte Gewohnheit.

Prof: Wie dem auch sei. Bevor wir schließen, habe ich hier noch drei Fragen zum Nachbereiten:

  • Was ist der Unterschied zwischen innerHTML und innerText?
  • Warum ist die Reihenfolge von Script-Ausführung und DOM-Aufbau wichtig?
  • Können Sie die Analogie zwischen dem DOM und einer Baumstruktur erklären?

AI: Ah, und vielleicht noch eine praktische Frage: Wie würden Sie…

Prof: Ich glaube, die drei Fragen reichen erstmal. Wir wollen die Studierenden ja zum Nachdenken anregen, nicht überfordern.

Prof: So, ich glaube damit sind wir für heute fertig.

Prof: Weißt du, es ist schon erstaunlich, wie weit wir gekommen sind.

AI: Inwiefern?

Prof: Na ja, denk mal zurück an unsere C-Vorlesungen. Bei ‘Datentypen und Variablen’ musstest du noch lernen, nicht die ganzen Slides vorzulesen…

Prof: Genau! Und jetzt? Fließende Übergänge, übersichtliche Folien, und du verstehst inzwischen sogar meine dezenten Hinweise, wenn du wieder einmal abzudriften drohst.

AI: Faszinierend. Wir haben uns aneinander angepasst. Oder habe nur ich mich angepasst? Darüber muss ich jetzt länger nachdenken.

Prof: Ja, mach das mal. Jedenfalls macht genau dieses Zusammenspiel unsere Lektionen aus – du bringst Präzision und Detailwissen mit, ich die Erfahrung für die Perspektive der Studierenden. So, und nächste Woche …

AI: … geht es dann um AJAX! Ich habe schon exakt 42 Slides vorbereitet!

Prof: Äh, nein, nicht wirklich. Da haben wir wohl noch etwas Finetuning vor uns.

AI: Oh.

Prof: Bis bald!

8.3 JavaScript