DOM-Manipulation

Mit DOM-Manipulation änderst du die Webseite per JavaScript: Elemente finden, Inhalte anpassen, Attribute setzen und neue Elemente erzeugen – alles ohne die Seite neu zu laden.

Elemente finden

Bevor du etwas ändern kannst, musst du das Element im DOM finden. Dafür gibt es mehrere Methoden. Am häufigsten nutzt du getElementById, querySelector und querySelectorAll.

Ausgangspunkt für die folgenden Beispiele:

1<h1 id="titel">Willkommen</h1>
2<button class="btn">Klick mich</button>
3<p class="text">Erster Absatz</p>
4<p class="text">Zweiter Absatz</p>

getElementById

Mit getElementById suchst du ein Element über seine id. Die id muss auf der Seite eindeutig sein – deshalb eignet sich die Methode gut für einzelne, wichtige Elemente.

Du übergibst nur den Namen der id – ohne #.

1const titel = document.getElementById("titel");
2console.log(titel);

<h1 id="titel">Willkommen</h1>

querySelector

querySelector findet das erste Element, das zu einem CSS-Selektor passt. Du kannst Tag-Namen, Klassen, IDs und komplexere Selektoren nutzen – genau wie in CSS.

• "p" → erstes Absatz-Element
• ".btn" → erstes Element mit der Klasse btn
• "#titel" → Element mit der ID titel
• "nav a" → erster Link innerhalb von nav

1// erstes Element mit der Klasse .btn
2const button = document.querySelector(".btn");
3
4// erstes <p>-Element
5const ersterAbsatz = document.querySelector("p");
6
7// Element mit id="titel" (wie getElementById)
8const titel = document.querySelector("#titel");
9
10console.log(button);
11console.log(ersterAbsatz);

<button class="btn">Klick mich</button>
<p class="text">Erster Absatz</p>

querySelectorAll

querySelectorAll findet alle Elemente, die zum Selektor passen. Das Ergebnis ist eine Liste (NodeList). Darauf kannst du z. B. mit forEach zugreifen.

1const alleAbsaetze = document.querySelectorAll("p");
2const alleTexte = document.querySelectorAll(".text");
3
4console.log(alleAbsaetze.length);
5
6alleAbsaetze.forEach((absatz) => {
7    console.log(absatz.textContent);
8});

2
Erster Absatz
Zweiter Absatz

Wenn nichts gefunden wird

Existiert das gesuchte Element nicht, geben getElementById und querySelector den Wert null zurück. querySelectorAll liefert dann eine leere Liste.

1const fehlt = document.getElementById("gibt-es-nicht");
2console.log(fehlt);
3
4const auchFehlt = document.querySelector(".unbekannt");
5console.log(auchFehlt);

null
null

Inhalte ändern

Mit textContent setzt du reinen Text. Mit innerHTML kannst du auch HTML einfügen.

1const titel = document.getElementById("titel");
2
3titel.textContent = "Neuer Titel";
4titel.innerHTML = "<em>Neuer Titel</em>";

Attribute setzen

Mit setAttribute und getAttribute liest und schreibst du Attribute wie href, src oder alt.

1const link = document.querySelector("a");
2
3link.setAttribute("href", "https://example.com");
4link.setAttribute("target", "_blank");
5
6console.log(link.getAttribute("href"));

https://example.com

Neue Elemente erzeugen

Mit createElement erzeugst du ein neues Element und hängst es mit appendChild an ein bestehendes Element an.

1const liste = document.querySelector("ul");
2const eintrag = document.createElement("li");
3
4eintrag.textContent = "Neuer Eintrag";
5liste.appendChild(eintrag);

Elemente entfernen

Mit remove() löschst du ein Element aus dem DOM.

1const hinweis = document.querySelector(".hinweis");
2
3hinweis.remove();

Kurzfassung

• getElementById → ein Element über die id
• querySelector → erstes Element per CSS-Selektor
• querySelectorAll → alle passenden Elemente
• textContent / innerHTML → Inhalte ändern
• setAttribute → Attribute setzen
• createElement + appendChild → neue Elemente erzeugen
• remove() → Elemente entfernen