DOM — Webseiten interaktiv machen

Das DOM (Document Object Model) ist die Baum-Struktur einer HTML-Seite. JavaScript kann es lesen und verändern.

Elemente finden & ändern

// Finden
const btn = document.querySelector("#meinButton");
const items = document.querySelectorAll(".listItem");

// Inhalt ändern
btn.textContent = "Klick mich!";
btn.innerHTML = "<b>Mit HTML</b>";

// Styles & Klassen
btn.classList.add("aktiv");
btn.style.color = "red";

// Erstellen
const neu = document.createElement("div");
neu.textContent = "Hallo";
document.body.appendChild(neu);

Events — auf Klicks und Eingaben reagieren

btn.addEventListener("click", (e) => {
  console.log("Klick!", e.target);
});

input.addEventListener("input", (e) => {
  console.log("Eingabe:", e.target.value);
});

document.addEventListener("DOMContentLoaded", () => {
  console.log("Seite geladen");
});

🎯

Event-DelegationStatt 100 Listener auf 100 Buttons: 1 Listener auf den gemeinsamen Container. Im Handler e.target prüfen. Performance + funktioniert auch für später hinzugefügte Elemente.