DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
DOM-Manipulation ist die Art, wie sich eine Webseite nach dem Laden verändert — eine Nachricht anzeigen, eine Tabellenzeile hinzufügen, ein Formular validieren, auf einen Klick reagieren. Dieses Tutorial behandelt die nativen Browser-APIs (getElementById, querySelector, textContent, classList, addEventListener, createElement), auf denen jedes Framework aufbaut.
Du arbeitest dich durch vier Kapitel mit lauffähigen Codebeispielen und einer interaktiven To-do-Demo, die du direkt im Browser anklicken kannst — daneben der äquivalente Vanilla-DOM-Code. Jedes Kapitel zeigt außerdem, wie du das gewünschte Verhalten einem KI-Assistenten beschreibst und prüfst, was er zurückliefert.
Am Ende kannst du Elemente sicher auswählen, Events verdrahten, Listen aus einem Daten-Array rendern, ein Formular beim Absenden validieren und die Layout-Thrashing-Muster vermeiden, die Seiten träge wirken lassen.
What's inside
- 1.Elemente auswählen — was das DOM ist, Elemente mit getElementById und querySelector finden und die gewünschte Änderung einem KI-Assistenten beschreiben.
- 2.Text, Styles & Events — Text, Attribute und Styles lesen und ändern und deine ersten click- und input-Listener verdrahten.
- 3.Events & Rendering — Elemente erstellen und entfernen, Event-Delegation und das Rendern des DOM aus einem Daten-Array.
- 4.Formulare & Performance — Formular-Submits mit Validierung verarbeiten, dazu Batching und Debouncing für schnelle, reaktionsfähige Apps.