Referenzkarte: DOM-Methoden

---

Finden

Code	Ergebnis
document.querySelector("sel")	erstes Element oder null
document.querySelectorAll("sel")	NodeList (mit forEach durchlaufen)
el.querySelector("sel")	sucht nur innerhalb von el
el.parentNode	Elternknoten (null, wenn nicht eingehängt)

Ändern

Code	Wirkung
el.textContent = "…"	Text setzen, HTML wird nicht interpretiert
el.innerHTML = "…"	HTML setzen ⚠️ nie mit fremden Daten
el.setAttribute("href", "#top") / el.getAttribute("href")	Attribut setzen / lesen
el.removeAttribute("title")	Attribut entfernen
el.dataset.team	data-team lesen/setzen (immer String)
el.classList.add / remove / toggle / contains("x")	Klassen
el.style.backgroundColor = "…"	Inline-Style (camelCase)

Erzeugen

Code	Ergebnis
document.createElement("li")	neues, loses Element (unsichtbar)
el.cloneNode(true)	Kopie mit allen Kindern
el.cloneNode(false)	Kopie ohne Kinder
document.createDocumentFragment()	Sammelbehälter für viele Elemente

Einhängen

<!-- ziel.before(el) -->
<ul id="ziel">
  <!-- ziel.prepend(el) -->
  <li>A</li>
  <li>B</li>
  <!-- ziel.append(el) -->
</ul>
<!-- ziel.after(el) -->

Code	Position	mehrere Argumente / Strings
ziel.prepend(el)	erstes Kind	✅
ziel.append(el)	letztes Kind	✅
ziel.before(el)	vor ziel	✅
ziel.after(el)	nach ziel	✅
ziel.appendChild(el)	letztes Kind (alt)	❌ nur ein Knoten

⚠️ Ein Element, das schon im Baum hängt, wird verschoben, nicht kopiert.

Entfernen & Ersetzen

Code	Wirkung
el.remove()	Element entfernen
alt.replaceWith(neu)	Element ersetzen
container.replaceChildren()	Container leeren
container.replaceChildren(a, b)	Inhalt ersetzen

Muster: Liste aus Daten

container.replaceChildren();
for (const eintrag of daten) {
  const li = document.createElement("li");
  li.textContent = eintrag.name;
  container.append(li);
}