JavaScript DOM Grundlagen
JavaScript DOM Grundlagen
querySelector, getElementById, textContent, innerHTML, classList, style und Elemente erstellen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- DOM-Elemente finden und verändern
textContentundinnerHTMLsicher unterscheiden- Klassen und neue Elemente per JavaScript verwalten
Erklärung
Das DOM ist die Browser-Darstellung des HTML-Dokuments. JavaScript kann Elemente suchen, Texte ändern, Klassen umschalten, Styles setzen oder Elemente erzeugen.
innerHTML interpretiert HTML-Text. Bei Benutzereingaben ist das gefährlich, weil XSS entstehen kann. Für normalen Text ist textContent sicherer.
Beispiele
const title = document.querySelector("h1");
title.textContent = "Aktualisierte Überschrift";
querySelector findet das erste passende Element.
const list = document.querySelector("#tasks");
const item = document.createElement("li");
item.textContent = "HTML Semantik wiederholen";
list.append(item);
So entsteht ein neues Listenelement ohne unsicheres HTML-Parsing.
button.classList.toggle("is-active");
classList ist meist sauberer als viele direkte Style-Zuweisungen.
Typische Fehler
- Benutzereingaben mit
innerHTMLeinfügen. - DOM-Elemente suchen, bevor sie existieren.
- Viele Inline-Styles per JavaScript setzen statt CSS-Klassen umzuschalten.
Best Practices
- Nutze
textContentfür Text. - Schalte Klassen und lasse CSS die Gestaltung übernehmen.
- Strukturiere HTML semantisch, damit DOM-Auswahl stabil bleibt.
Kleine Übung
Baue eine Aufgabenliste, bei der JavaScript neue li-Elemente erstellt und erledigte Aufgaben per Klasse markiert.
Zusammenfassung
JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026