JS 04: DOM-Manipulation & Events 🎭

Willkommen zu Modul 04 des JavaScript-Kurses!

Das Document Object Model (DOM) ist die Schnittstelle zwischen JavaScript und der sichtbaren HTML-Struktur im Webbrowser. Durch die Kombination aus DOM-Selektoren, Manipulation und Event-Listenern hauchst du statischen Webseiten echtes Leben ein und machst sie interaktiv.

💡 1. Das Wichtigste in Kürze

A. Was ist das DOM?

Der Browser parst HTML-Code und baut daraus einen hierarchischen Baum aus JavaScript-Objekten (DOM Tree):

         document
            │
         <html>
        ┌───┴───┐
     <head>   <body>
        │       ┌───┴────────┐
     <title>  <h1>          <div> (Container)
                             ┌───┴───┐
                          <button>  <ul>
                                     │
                                    <li>

Jeder HTML-Tag wird zu einem DOM-Element (Node) mit Eigenschaften und Methoden, die du in JavaScript zur Laufzeit auslesen und verändern kannst.

B. Elemente selektieren

Moderne Selektoren nutzen dieselbe Syntax wie CSS:

// Einzelnes Element selektieren (erstes Vorkommen):
const ueberschrift = document.querySelector("h1");
const speicherBtn = document.querySelector("#save-btn");
const erstesItem = document.querySelector(".liste-item");

// Mehrere Elemente selektieren (NodeList / Collection):
const alleButtons = document.querySelectorAll(".btn");
alleButtons.forEach(btn => console.log(btn.textContent));

C. Element-Inhalte & Klassen manipulieren

const box = document.querySelector("#info-box");

// 1. Textinhalt sicher ändern (schützt vor XSS-Sicherheitslücken):
box.textContent = "Neuer sicherer Text";

// 2. CSS-Klassen verwalten mit classList:
box.classList.add("aktiv");       // Klasse hinzufügen
box.classList.remove("inaktiv");  // Klasse entfernen
box.classList.toggle("sichtbar"); // Hinzufügen falls fehlt, sonst entfernen
console.log(box.classList.contains("aktiv")); // true oder false

D. Event-Listener (Ereignis-Steuerung)

Mit addEventListener() reagiert deine Webanwendung auf Benutzerinteraktionen wie Klicks, Tastatureingaben oder Formulare:

const button = document.querySelector("#klick-mich");

button.addEventListener("click", (event) => {
  console.log("Button wurde angeklickt!", event.target);
  button.textContent = "Erfolgreich geklickt! 🎉";
});

E. Dynamische Elemente erstellen

Du kannst neue HTML-Elemente dynamisch zur Laufzeit erzeugen und in den DOM-Baum einhängen:

// 1. Element im Speicher erzeugen:
const neuesLi = document.createElement("li");
neuesLi.textContent = "Neuer dynamischer Eintrag";
neuesLi.classList.add("eintrag");

// 2. In den DOM-Baum an ein Elternelement anfügen:
const liste = document.querySelector("#aufgaben-liste");
liste.appendChild(neuesLi);

🎼 Die didaktische Analogie: "Der Dirigent des Web-Orchesters"

Das HTML-Dokument als Partitur:
HTML liefert den statischen Notentext und die Struktur des Musikstücks.
Der Browser als Orchester:
Die Musiker (DOM-Nodes) sitzen bereit, um Töne und Farben darzustellen.
JavaScript als Dirigent:
- Selektoren (querySelector): Der Dirigent schaut gezielt zu den Streichern oder Bläsern.
- Manipulation (textContent, classList): Mit dem Taktstock gibt der Dirigent Anweisungen für Lautstärke, Helligkeit oder Text.
- Events (addEventListener): Der Dirigent wartet auf den Einsatz oder den Applaus des Publikums und reagiert dynamisch.

🏗️ Headless- & Isolierte Logik (Testbare Architektur)

In moderner Web-Entwicklung (wie React, Vue oder Node.js) trennen professionelle Entwickler reine Berechnungs- und Zustandslogik von direkten DOM-Zugriffen.

Dadurch können Funktionen wie aktualisiereZaehlerAnzeige oder filtereElementeNachKlasse sowohl im echten Browser als auch in Headless-Umgebungen (z.B. Unittests im Web-Worker / CI-Runner) blitzschnell und ohne echten Monitor getestet werden!

🎯 Aufgaben & Teilziele in `aufgabe.js`

Öffne aufgabe.js und löse die 4 Aufgaben:

TODO 1: erzeugeButtonElement(text, cssKlasse, clickCallback)
Erstelle einen Button (document.createElement("button")), setze den Text, füge optional die CSS-Klasse hinzu und binde den Click-Callback per addEventListener an.
TODO 2: erstelleListenEintrag(titel, istErledigt = false)
Erstelle ein <li>-Element mit dem Titel und füge die Klasse "erledigt" hinzu, falls istErledigt === true ist.
TODO 3: filtereElementeNachKlasse(elementListe, cssKlasse)
Filtere ein Array von DOM-Elementen nach element.classList.contains(cssKlasse).

TODO 4: aktualisiereZaehlerAnzeige(aktuellerWert, schwellenwert = 10)
Berechne das Zustands-Objekt für eine Zähler-Komponente:

{
  text: `Zähler: ${aktuellerWert} / ${schwellenwert}`,
  wert: aktuellerWert,
  istKritisch: aktuellerWert >= schwellenwert,
  statusKlasse: aktuellerWert >= schwellenwert ? "status-kritisch" : "status-normal"
}

🧪 Tests ausführen

Starte die Tests im Test-Runner oder in der Web-IDE. Sobald alle Tests grün sind, hast du DOM-Manipulation & Events gemeistert!

5.3 KiB Raw Permalink Blame History