Was ist das DOM?
Das DOM (Document Object Model) ist die Seite so, wie der Browser sie im Speicher hält: ein Baum aus Elementen. JavaScript kann diesen Baum lesen und verändern, und der Browser zeigt die Änderung sofort.
Auf dem Mensaplan soll ein Hinweis erscheinen, sobald die Mensa öffnet. Ohne JavaScript müssten Sie die Datei ändern und die Seite neu laden.
Am Ende dieser Lektion
Notiz
Ich kann den Text und die Klassen eines Elements mit JavaScript ändern.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| JavaScript | die Sprache, die eine Seite im Browser verändert | |
| DOM | die Seite als Baum aus Elementen im Speicher des Browsers | |
| querySelector | holt das erste Element, das zu einem Selektor passt | document.querySelector("#plan") |
| textContent | der Text eines Elements, lesbar und änderbar | |
| classList | die Klassen eines Elements, die man hinzufügen und entfernen kann |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das DOM ist ein Baum aus Elementen
Der Browser liest das HTML und baut daraus einen Baum. Jedes Element ist ein Knoten. Es hat ein Elternelement und oft Kinder.
JavaScript läuft im Browser und greift auf diesen Baum zu. Ändert es einen Knoten, zeichnet der Browser die Seite neu. Die Datei auf dem Server bleibt dabei unverändert.
Mit querySelector holen Sie ein Element
document.querySelector("#meldung") gibt das erste Element zurück, das zum Selektor passt. Es nimmt dieselben Selektoren wie CSS. document.querySelectorAll("li") gibt alle passenden Elemente zurück, als Liste.
Speichern Sie das Ergebnis in einer Variablen, hier mit var. Dann können Sie das Element mehrfach nutzen.
Ändern Sie einen Text
<h1>Mensaplan</h1>
<p id="meldung">Die Mensa ist geschlossen.</p>
Mit classList ändern Sie das Aussehen
Das Aussehen steht in CSS. JavaScript muss es nicht selbst setzen. Es fügt einem Element eine Klasse hinzu, und die CSS-Regel für diese Klasse greift.
classList.add("x") fügt eine Klasse hinzu, classList.remove("x") entfernt sie, und classList.toggle("x") schaltet sie um. So bleiben Aussehen und Verhalten getrennt.
Geben Sie allen Gerichten eine Klasse
<ul>
<li>Suppe</li>
<li>Pizza</li>
<li>Salat</li>
</ul>
Ein häufiger Fehler
Warnung
Viele setzen das Skript in den head und wundern sich, dass querySelector nichts findet. Der Browser liest die Seite von oben nach unten. Das Element existiert dann noch nicht. Setzen Sie das Skript ans Ende des body.
Das Lab liest das Skript einer echten Seite
Die Seite im Lab hat die Datei site/app.js. Sie holt mehrere Elemente über ihre id, ändert Klassen und Texte und reagiert auf drei Ereignisse. Das Skript des Labs liest sie als Text.
Es gibt englische Wörter aus: function, listens for und looks up id. Die Zeilen mit looks up id zeigen, welche Elemente die Seite holt.
Das Skript der Seite untersuchen
docker exec jupyter python3 steps/js.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.