143 lines
5.3 KiB
Markdown
143 lines
5.3 KiB
Markdown
# 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:
|
|
|
|
```javascript
|
|
// 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
|
|
```javascript
|
|
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:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
```javascript
|
|
// 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:
|
|
|
|
1. **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.
|
|
|
|
2. **TODO 2:** `erstelleListenEintrag(titel, istErledigt = false)`
|
|
Erstelle ein `<li>`-Element mit dem Titel und füge die Klasse `"erledigt"` hinzu, falls `istErledigt === true` ist.
|
|
|
|
3. **TODO 3:** `filtereElementeNachKlasse(elementListe, cssKlasse)`
|
|
Filtere ein Array von DOM-Elementen nach `element.classList.contains(cssKlasse)`.
|
|
|
|
4. **TODO 4:** `aktualisiereZaehlerAnzeige(aktuellerWert, schwellenwert = 10)`
|
|
Berechne das Zustands-Objekt für eine Zähler-Komponente:
|
|
```javascript
|
|
{
|
|
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!
|