JavaScript 7 — DOM & Events

In dieser Lektion lernst du, wie JavaScript mit der Webseite selbst interagiert. Das DOM macht HTML-Elemente programmatisch zugänglich, und Events ermöglichen Reaktionen auf Benutzeraktionen. Hier beginnt echte Interaktivität.

1. Was ist das DOM?

Definition.
Das Document Object Model (DOM) ist eine Baumstruktur, die das HTML-Dokument im Browser repräsentiert. Jedes HTML-Element ist ein Objekt, das JavaScript lesen und verändern kann.

Wichtig: JavaScript verändert nicht die HTML-Datei auf der Festplatte, sondern die aktuell geladene Seite im Browser.

// Zugriff auf das Dokument
console.log(document);

2. Elemente im DOM auswählen

Um mit einem Element zu arbeiten, muss JavaScript es zuerst finden.

2.1 Auswahl per ID

const title = document.getElementById("title");

2.2 Auswahl mit CSS-Selektoren

const firstParagraph = document.querySelector("p");
const allButtons = document.querySelectorAll("button");

querySelector gibt das erste passende Element zurück, querySelectorAll eine Liste (NodeList).

3. Inhalte ändern

Ein gefundenes Element kann inhaltlich und visuell verändert werden.

3.1 Textinhalt

title.textContent = "Neuer Titel";

3.2 HTML-Inhalt

title.innerHTML = "<span>Hallo</span>";

innerHTML erlaubt HTML, sollte aber vorsichtig verwendet werden (Sicherheitsrisiken).

4. Attribute und Klassen

DOM-Elemente besitzen Attribute und CSS-Klassen, die dynamisch geändert werden können.

4.1 Attribute

const img = document.querySelector("img");
img.setAttribute("src", "bild.png");
img.getAttribute("src");

4.2 Klassen

const box = document.querySelector(".box");

box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("open");

5. Was sind Events?

Ein Event ist ein Ereignis, das im Browser auftritt (z. B. Klick, Tastendruck, Laden der Seite).

JavaScript kann auf solche Ereignisse reagieren.

Klick auf einen Button
Bewegung der Maus
Eingabe in ein Formular
Laden der Seite

6. Event Listener

Mit addEventListener wird festgelegt, welcher Code bei einem Event ausgeführt wird.

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("Button geklickt");
});

Der zweite Parameter ist eine Funktion, die nicht sofort ausgeführt wird.

7. Event-Objekt

Beim Auslösen eines Events stellt der Browser ein Event-Objekt bereit, das Informationen über das Ereignis enthält.

btn.addEventListener("click", (event) => {
  console.log(event.type);   // "click"
  console.log(event.target); // Element, das geklickt wurde
});

8. Häufige Events

Einige Events begegnen dir besonders häufig:

click — Mausklick
input — Texteingabe
submit — Formular absenden
keydown — Taste gedrückt
DOMContentLoaded — DOM fertig geladen

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM bereit");
});

9. Beispiel: Interaktiver Button

const btn = document.querySelector("#toggle");
const text = document.querySelector("#text");

btn.addEventListener("click", () => {
  text.classList.toggle("hidden");
});

Hier arbeiten DOM-Auswahl, Klassenmanipulation und Events zusammen.

10. Typische Fehler

Element existiert nicht (null)
Script läuft vor dem HTML
Falscher Selektor
Event-Handler wird versehentlich sofort aufgerufen

Falsch:

btn.addEventListener("click", myFunction());

Richtig:

btn.addEventListener("click", myFunction);

11. Übungen

Übung 1.
Ändere den Text eines Absatzes beim Klick auf einen Button.

Übung 2.
Erstelle ein Eingabefeld und gib den aktuellen Text live in der Konsole aus.

Übung 3.
Schalte per Button eine CSS-Klasse an und aus (Dark Mode).

12. Zusammenfassung

DOM macht HTML programmierbar
Elemente werden per Selektor gefunden
Events reagieren auf Benutzeraktionen
Interaktivität entsteht durch Kombination aus DOM & Events

Wer DOM und Events beherrscht, macht Webseiten lebendig.