Der Kurs JavaScript DOM & Events vermittelt, wie Webseiten über das Document Object Model strukturiert angesprochen und durch Ereignisse gesteuert werden. Teilnehmende lernen, wie HTML-Strukturen programmatisch verändert, Zustände abgebildet und Benutzerinteraktionen verarbeitet werden. Der Schwerpunkt liegt auf dem gezielten Zugriff auf Elemente, moderner Ereignisbehandlung und einer klaren Trennung von Struktur, Stil und Logik in der Webentwicklung.
1. Grundlagen - DOM-Struktur und Zugriff2. Events - Modell, Listener und Ablauf3. Dynamische Änderungen und Zustände4. Anwendung und Muster1. Grundlagen - DOM-Struktur und Zugriff
- Aufbau des Document Object Model in modernen Browsern
- Auswahl von Elementen über Selektoren und Navigationsmethoden
- Lesen und Ändern von Attributen, Inhalten und Klassen
- Unterschiede zwischen Node, Element und Collection
2. Events - Modell, Listener und Ablauf
- Ereignismodell im Browser (Bubbling und Capturing)
- Registrierung von Event Listenern über Methoden und Attribute
- Verwendung typischer Ereignisse wie Klick, Eingabe, Tastatur und Scrollen
- Vermeidung mehrfacher Registrierung und Einsatz von Entfernen-Methoden
3. Dynamische Änderungen und Zustände
- Einfügen, Entfernen und Verschieben von DOM-Elementen
- Arbeiten mit Klassen zur Steuerung von Sichtbarkeit und Layout
- Abbildung einfacher Zustände über Datenattribute und Variablen
- Umgang mit Formularen, Validierung und Rückmeldungen im DOM
4. Anwendung und Muster
- Erstellung kleiner Interaktionsmuster wie Menüs, Tabs oder Modale
- Strukturierung von Event-Logik in Funktionen
- Einsatz von Delegation zur Reduktion von Listenern
- Grundlagen der Trennung von Präsentation und Verhalten