DOM & Events — Webseiten interaktiv machen (neu)

Lernziele

Sie wissen, was das DOM ist und können HTML-Elemente in JavaScript ansprechen.

Sie können mit getElementById und querySelector einzelne Elemente auswählen.

Sie können Inhalt und Stil von Elementen aus JavaScript heraus verändern (textContent, innerHTML, style, classList).

Sie verstehen, was ein Event ist, und können auf Klicks reagieren — sowohl mit onclick als auch mit addEventListener.

Was ist JavaScript?

JavaScript ist eine vollwertige Programmiersprache — anders als HTML und CSS. JavaScript kann rechnen, Entscheidungen treffen und auf Aktionen der Nutzer:innen reagieren. Damit verleiht JavaScript einer Webseite Verhalten.

JavaScript läuft direkt im Browser. Sie brauchen nichts zu installieren — der Code im Editor unten wird vom Browser ausgeführt.

JavaScript ≠ Java

Trotz des ähnlichen Namens haben JavaScript und Java historisch wenig miteinander zu tun. Der Name war eine Marketing-Entscheidung der 1990er Jahre, als Java sehr populär war. JavaScript ist ihre eigene, unabhängige Sprache.

Das DOM — der Baum aus HTML

Wenn der Browser eine HTML-Seite lädt, baut er im Speicher einen Baum aus all den Tags. Diesen Baum nennt man DOM ("Document Object Model").

<body>
  <h1>Titel</h1>
  <p>Ein Absatz.</p>
  <button>Klick mich</button>
</body>

wird intern zu so etwas:

Mit JavaScript können wir diesen Baum abfragen und verändern — Elemente finden, ihren Text ändern, ihre Farbe ändern, neue Elemente hinzufügen, alte löschen.

Elemente finden mit `getElementById`

Die einfachste Art, ein bestimmtes Element zu finden: Geben Sie ihm im HTML eine id, und greifen Sie es in JavaScript mit document.getElementById("...") ab.

Was passiert hier:

Klick auf den Knopf ruft die Funktion aendere() auf.
document.getElementById("titel") sucht das Element mit id="titel" und gibt es zurück.
Wir speichern es in der Variable titel.
Wir setzen seine textContent-Eigenschaft auf einen neuen Text.

textContent ist der reine Text-Inhalt eines Elements. Es gibt auch innerHTML, das HTML-Tags interpretiert:

Stil ändern mit `style` und `classList`

Sie können den CSS-Stil eines Elements direkt aus JavaScript heraus ändern.

Direkt mit `style`

CSS-Eigenschaften in JavaScript

CSS schreibt man mit Bindestrichen (font-weight, background-color). In JavaScript werden daraus camelCase: fontWeight, backgroundColor. Grund: Der Bindestrich hat in JavaScript schon eine andere Bedeutung (Minus).

Eleganter mit `classList`

Statt einzelne CSS-Eigenschaften zu setzen, ist es oft sauberer, eine CSS-Klasse hinzuzufügen oder zu entfernen. Die ganze Stilarbeit bleibt im CSS, JavaScript schaltet nur um.

Drei nützliche Methoden auf classList:

classList.add("xyz") — fügt die Klasse hinzu (falls noch nicht vorhanden).
classList.remove("xyz") — entfernt sie (falls vorhanden).
classList.toggle("xyz") — wechselt zwischen Hinzufügen und Entfernen.

Mehrere Elemente finden mit `querySelector`

getElementById findet genau ein Element. Manchmal braucht man flexibler, z.B. "das erste <p> im Dokument" oder "alle Elemente mit Klasse .box".

Dafür gibt es:

document.querySelector("CSS-Selektor") — gibt das erste passende Element zurück.
document.querySelectorAll("CSS-Selektor") — gibt alle passenden Elemente zurück (als Liste).

Sie können dieselben Selektoren verwenden wie in CSS!

Events — auf Aktionen reagieren

Bisher haben wir Events mit onclick="..." direkt im HTML angegeben. Das ist die einfachste Variante. Es gibt aber auch eine modernere, sauberere Art: addEventListener.

Vorteile von addEventListener:

HTML und JavaScript bleiben sauber getrennt — kein onclick im HTML.
Sie können mehrere Event-Listener am selben Element registrieren.
Sie können auch wieder entfernen mit removeEventListener.

Die wichtigsten Events für den Anfang:

Event-Name	Wird ausgelöst, wenn...
`click`	Auf das Element geklickt wird.
`mouseover`	Die Maus über das Element fährt.
`mouseout`	Die Maus das Element wieder verlässt.
`keydown`	Eine Taste gedrückt wird.
`input`	Der Inhalt eines Eingabefelds sich ändert.
`change`	Ein Eingabefeld den Wert wechselt (und Fokus verliert).

Sie sind dran!

Bauen Sie eine kleine Webseite mit drei Knöpfen "Rot", "Grün", "Blau". Wenn man auf einen Knopf klickt, soll sich die Hintergrundfarbe der Seite (document.body.style.backgroundColor) entsprechend ändern.

Eine mögliche Lösung

<button onclick="document.body.style.backgroundColor = 'red'">Rot</button>
<button onclick="document.body.style.backgroundColor = 'green'">Grün</button>
<button onclick="document.body.style.backgroundColor = 'blue'">Blau</button>

Eingaben lesen mit `value`

Bei Formularelementen wie <input> und <select> enthält die Eigenschaft .value den aktuellen Wert.

Mini-Übung: Click-Counter mit Reset

Bauen Sie einen Klick-Zähler:

Ein Knopf "Klick", der bei jedem Klick einen Zähler um 1 erhöht.
Ein Knopf "Reset", der den Zähler auf 0 zurücksetzt.
Eine Anzeige, die den aktuellen Wert zeigt.

Bonus: Wenn der Zähler einen Wert erreicht, der durch 10 teilbar ist, soll die Anzeige in einer anderen Farbe blinken (oder einen Glückwunsch ausgeben).

Mögliche Lösung

<h2>Klick-Zähler</h2>

<p id="anzeige">0</p>

<button onclick="hochzaehlen()">Klick</button>
<button onclick="zuruecksetzen()">Reset</button>

<script>
  let zaehler = 0;

  function hochzaehlen() {
    zaehler = zaehler + 1;
    let anzeige = document.getElementById("anzeige");
    anzeige.textContent = zaehler;
    if (zaehler % 10 === 0 && zaehler > 0) {
      anzeige.style.color = "green";
      anzeige.textContent = zaehler + " 🎉";
    } else {
      anzeige.style.color = "black";
    }
  }

  function zuruecksetzen() {
    zaehler = 0;
    document.getElementById("anzeige").textContent = "0";
    document.getElementById("anzeige").style.color = "black";
  }
</script>

Zusammenfassung

Zusammenfassung

Elemente finden

document.getElementById("xy") — ein einzelnes Element mit dieser ID.

document.querySelector("CSS-Selektor") — das erste passende Element.

document.querySelectorAll("CSS-Selektor") — alle passenden Elemente.

Inhalt und Stil ändern

element.textContent = "..." — Text-Inhalt ändern.

element.innerHTML = "..." — HTML-Inhalt ändern.

element.style.color = "red" — einzelne CSS-Eigenschaft setzen.

element.classList.toggle("klasse") — CSS-Klasse hinzufügen/entfernen.

Events

Inline mit <button onclick="meineFunktion()"> — kurz und einfach.

Sauber mit element.addEventListener("click", function() { ... }) — flexibler.

Eingaben lesen

inputElement.value — der aktuelle Wert eines Eingabefelds.

In der nächsten Lektion bauen wir mit diesen Werkzeugen ein richtiges Mini-Spiel.