JavaScript
DOM
Das DOM ist die Objektdarstellung deiner HTML-Seite. JavaScript liest und verändert darüber Inhalte, Attribute und Klassen.
Elemente finden
document.querySelector findet das erste Element zu einem CSS-Selektor.
document.querySelectorAll liefert alle Treffer als Liste zum Durchlaufen.
<document.querySelector><querySelectorAll>
Selektieren
const titel = document.querySelector('h1');
const buttons = document.querySelectorAll('.action');Inhalte ändern
.textContent liest oder schreibt reinen Text — sicher gegen eingeschleustes HTML.
.innerHTML interpretiert den Wert als HTML. Nur mit vertrauenswürdigen Inhalten verwenden.
<.textContent><.innerHTML>
Text setzen
titel.textContent = 'Neuer Titel';
// Vorsicht:
// element.innerHTML = nutzerEingabe; // XSS-Risiko!Klassen und neue Elemente
classList.add, remove und toggle steuern CSS-Klassen — so verbindet sich JavaScript mit CSS.
document.createElement erzeugt neue Elemente, append hängt sie in die Seite.
<classList><createElement><append>
Element erzeugen
const li = document.createElement('li');
li.textContent = 'Neuer Eintrag';
document.querySelector('ul').append(li);Fortschritt
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.