Das DOM: Elemente ändern

Beim Laden baut der Browser aus dem HTML einen Baum aus Objekten: das DOM (Document Object Model). JavaScript kann jeden Knoten darin finden und ändern.

<body>
  <h1 id="titel">Sportfest</h1>
  <p class="hinweis">Turnschuhe mitbringen</p>
  <ul>
    <li>Sprint</li>
    <li>Staffel</li>
  </ul>
</body>

document.getElementById("titel")
document.querySelector(".hinweis")
document.querySelector("li")
document.querySelectorAll("li")

• Knoten:jedes Element ist ein Knoten; body ist Elternknoten von h1, p und ul.
• getElementById("id"):liefert das eine Element mit dieser id — ohne #.
• querySelector("…"):nimmt einen CSS-Selektor und liefert das erste passende Element.
• querySelectorAll("…"):liefert alle passenden Elemente als Liste (mit length und Index).
• Kein Treffer:querySelector liefert dann null.

Welche Elemente trifft der Selektor? Markiere sie im Baum (anklicken oder Tab + Leertaste) und prüfe dann. Achte darauf, ob querySelector oder querySelectorAll dasteht.

Halte fest: querySelector liefert höchstens ein Element — das erste im Baum von oben —, querySelectorAll liefert alle passenden als Liste.

Ein gefundenes Element speichert man in einer Variablen und ändert dann seine Eigenschaften — die Seite ändert sich sofort mit.

const titel = document.getElementById("titel");
titel.textContent = "Sportfest 2026";
titel.style.color = "#2c5fb5";
const hinweis = document.querySelector(".hinweis");
hinweis.classList.add("wichtig");

• textContent:liest oder ersetzt den Text im Element.
• innerHTML:ersetzt den Inhalt samt HTML-Tags — nur für eigene, sichere Inhalte verwenden.
• style:element.style.eigenschaft = "wert"; aus font-size wird fontSize.
• classList:add, remove, toggle schalten CSS-Klassen — die Gestaltung bleibt in der CSS-Datei.
• Reihenfolge:erst finden, dann ändern: Ist das Element null, bricht die nächste Zeile mit TypeError ab.