🌳 1. Der DOM-Baum & Selektoren
Der Browser übersetzt HTML in eine Baumstruktur von Objekten (den DOM-Baum). Mit modernen Selektoren greifst du gezielt auf jedes Element zu:
└── <html>
├── <head> (title, meta, link)
└── <body>
├── <h1 id="titel">
├── <button class="btn">
└── <ul id="aufgaben"> ── <li class="erledigt">
// 🎯 Einzelnes Element mit CSS-Selektor ansprechen:
const titel = document.querySelector("#titel");
const button = document.querySelector(".btn-primary");
// 🎯 Alle passenden Elemente als NodeList abfragen:
const alleItems = document.querySelectorAll("ul#aufgaben > li");
alleItems.forEach(item => console.log(item.textContent));🎨 2. Elemente manipulieren & stylen
Über Eigenschaften wie textContent und classList veränderst du Texte und Klassen zur Laufzeit:
const karte = document.querySelector(".info-karte");
// 🔒 Sicherer Text (verhindert Cross-Site-Scripting / XSS):
karte.textContent = "Aktualisierter Status: Online";
// 🏷️ CSS-Klassen verwalten mit classList:
karte.classList.add("aktiv"); // Klasse hinzufügen
karte.classList.remove("inaktiv"); // Klasse entfernen
karte.classList.toggle("hervorgehoben"); // Ein- oder ausschalten
console.log(karte.classList.contains("aktiv")); // true⚡ 3. Event-Driven Architecture (Reaktivität)
Mit addEventListener() reagiert deine Website sofort auf Aktionen des Nutzers (Klicks, Tastenanschläge, Formularabsendungen):
const saveBtn = document.querySelector("#btn-save");
saveBtn.addEventListener("click", (event) => {
console.log("Button geklickt! Ziel-Element:", event.target);
saveBtn.textContent = "Gespeichert! ✅";
saveBtn.classList.add("btn-success");
});HTML ist die Partitur, der Browser das Orchester und dein JavaScript-Code der Dirigent: Selektoren sind der gezielte Blick zu den Instrumentengruppen, DOM-Manipulation ist die Taktstockbewegung für Lautstärke oder Klang, und Event-Listener sind das aufmerksame Lauschen auf den richtigen Takt und Applaus.
📑 4. Cheat-Sheet: DOM-Methoden & Events
| Methode / Eigenschaft | Beispiel | Wirkung |
|---|---|---|
document.querySelector(sel) |
document.querySelector(".btn") |
Findet das erste passende Element |
document.querySelectorAll(sel) |
document.querySelectorAll("li") |
Findet alle passenden Elemente |
document.createElement(tag) |
const btn = document.createElement("button") |
Erstellt ein neues Element im Speicher |
element.textContent |
el.textContent = "Hallo Welt" |
Liest oder setzt reinen Text |
element.classList.add/remove/contains |
el.classList.contains("aktiv") |
Manipuliert und prüft CSS-Klassen |
element.addEventListener(ev, fn) |
el.addEventListener("click", () => ...) |
Registriert Callback bei Ereignis |
🎯 Aufgaben & Checkliste in aufgabe.js
Indem du DOM-Helfer und Zustandslogik in modulare Funktionen aufteilst, kann dein Code sowohl im Webbrowser als auch in isolierten Testumgebungen (wie Web-Workern und CI-Pipelines) zuverlässig getestet werden.