Im Browser stellt das DOM die Seite als Baum dar. Mit document.querySelector("#id") findest du Elemente, mit textContent änderst du Text und mit classList Klassen. Auf Ereignisse reagierst du mit addEventListener.
So entsteht Interaktion: Ein Klick löst eine Funktion aus, die die Seite anpasst.
<button id="knopf">Klick mich</button>
<p id="ausgabe"></p>
<script>
let zaehler = 0;
document.querySelector("#knopf").addEventListener("click", () => {
zaehler++;
document.querySelector("#ausgabe").textContent = `Klicks: ${zaehler}`;
});
</script>Merke
querySelectorfindet Elemente per CSS-SelektoraddEventListenerreagiert auf EreignissetextContentsetzt Text sicher (kein HTML)
Aufgabe
Baue einen Knopf, der die Hintergrundfarbe der Seite wechselt.