DOM
Das DOM ist die Objektdarstellung deiner HTML-Seite. JavaScript liest und verändert darüber Inhalte, Attribute und Klassen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Elemente finden
document.querySelector findet das erste Element zu einem CSS-Selektor.
document.querySelectorAll liefert alle Treffer als Liste zum Durchlaufen.
const titel = document.querySelector('h1');
const buttons = document.querySelectorAll('.action');Inhalte ändern
.textContent liest oder schreibt reinen Text — sicher gegen eingeschleustes HTML.
.innerHTML interpretiert den Wert als HTML. Nur mit vertrauenswürdigen Inhalten verwenden.
titel.textContent = 'Neuer Titel';
// Vorsicht:
// element.innerHTML = nutzerEingabe; // XSS-Risiko!Klassen und neue Elemente
classList.add, remove und toggle steuern CSS-Klassen — so verbindet sich JavaScript mit CSS.
document.createElement erzeugt neue Elemente, append hängt sie in die Seite.
const li = document.createElement('li');
li.textContent = 'Neuer Eintrag';
document.querySelector('ul').append(li);Vertiefung
Das DOM ist eine Live-Struktur
Das DOM ist kein Text, sondern ein Baum aus Objekten. Wenn du ein Element veränderst, sieht der Browser die Änderung sofort — und kann Layout und Darstellung neu berechnen.
textContent ist für Text sicher. innerHTML interpretiert HTML und ist bei Nutzereingaben ein XSS-Risiko. Für neue Elemente sind createElement und append sauberer.
const titel = document.querySelector("h1");
titel.textContent = "Neu";
const li = document.createElement("li");
li.textContent = "Eintrag";
document.querySelector("ul").append(li);Merksatz: DOM-Änderungen sind sofort sichtbar. Nutzereingaben niemals ungeprüft als innerHTML einsetzen.
Übungsaufgabe
Einkaufsliste
Erzeuge aus einem Array von Artikeln Listeneinträge im DOM. Der erste Eintrag soll zusätzlich die Klasse „wichtig“ erhalten.
Das soll dein Programm können
- querySelector für die Liste
- createElement und textContent
- classList.add für den ersten Eintrag
- Alle Einträge mit append hinzufügen
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Durchlaufe das Array mit forEach. Für den Index kannst du den zweiten Parameter von forEach nutzen.
Lösung anzeigen
const artikel = ["Brot", "Milch", "Kaffee"];
const liste = document.querySelector("#einkauf");
artikel.forEach((name, index) => {
const li = document.createElement("li");
li.textContent = name;
if (index === 0) li.classList.add("wichtig");
liste.append(li);
});Warum funktioniert das?
Jeder Artikel wird als eigenes Element erzeugt. textContent schützt vor HTML-Injection; classList verbindet das Verhalten mit CSS.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.