JavaScript DOM-Manipulation

6 Kernkonzepte

Die wichtigsten Methoden für die DOM-Manipulation in JavaScript: querySelector · createElement · innerHTML · addEventListener · classList · setAttribute Das Document Object Model (DOM) ist die Schnittstelle zwischen JavaScript und HTML. Mit diesen Methoden können Sie Elemente finden, erstellen, verändern und auf Ereignisse reagieren.

Elemente finden – querySelector, getElementById

document.querySelector() · querySelectorAll()

element = document.querySelector("#id") elements = document.querySelectorAll(".klasse") element = document.getElementById("id")

Selektoren finden Elemente im DOM. querySelector() und querySelectorAll() verwenden CSS-Selektoren für maximale Flexibilität.

Die wichtigsten Selektoren-Methoden

Methode	Beschreibung	Rückgabe
querySelector(selektor)	Erstes Element, das den CSS-Selektor erfüllt	Element oder null
querySelectorAll(selektor)	Alle Elemente, die den CSS-Selektor erfüllen	NodeList (Array-ähnlich)
getElementById(id)	Element mit der angegebenen ID	Element oder null
getElementsByClassName(klasse)	Elemente mit der angegebenen Klasse	HTMLCollection
getElementsByTagName(tagname)	Elemente mit dem angegebenen Tag	HTMLCollection

Beispiele

// Element mit ID "header"

header = document.getElementById("header")

// Erstes Element mit Klasse "active"

active = document.querySelector(".active")

// Alle Elemente mit Klasse "item"

items = document.querySelectorAll(".item")

// Alle <li> innerhalb von <ul>

listItems = document.querySelectorAll("ul li")

// Verschachteltes Element

el = document.querySelector("#container .content p")

Tipp: querySelector() ist flexibler als getElementById() und sollte bevorzugt werden. Für mehrere Elemente immer querySelectorAll() verwenden.

Elemente erstellen – createElement, appendChild

createElement() · appendChild() · removeChild()

newEl = document.createElement("div") parent.appendChild(newEl) parent.removeChild(child)

Elemente erstellen und einfügen – mit createElement() erzeugen Sie neue DOM-Elemente und mit appendChild() oder insertBefore() fügen Sie sie ein.

Methoden für das Einfügen

Methode	Beschreibung
appendChild(child)	Fügt child als letztes Kind ein
insertBefore(new, reference)	Fügt new vor reference ein
replaceChild(new, old)	Ersetzt old durch new
removeChild(child)	Entfernt child
innerHTML	HTML-Code direkt einfügen (einfach, aber weniger sicher)
insertAdjacentHTML(pos, html)	HTML an Position einfügen ('beforebegin', 'afterbegin', 'beforeend', 'afterend')

Beispiele

// Neues Element erstellen

neueDiv = document.createElement("div")

neueDiv.textContent = "Hallo Welt"

container.appendChild(neueDiv)

// Komplexeres Element mit innerHTML

container.innerHTML = `<div class="box">Inhalt</div>`

// Mehrere Elemente in einer Schleife

for (i = 0; i < 5; i++) {

li = document.createElement("li")

li.textContent = `Item ${i}`

liste.appendChild(li)

}

Tipp: innerHTML ist schnell, aber XSS-gefährdet bei Benutzereingaben. Verwenden Sie textContent oder createElement() für mehr Sicherheit.

Inhalt ändern – innerHTML, textContent, innerText

innerHTML · textContent · innerText

el.textContent = "Neuer Text" # Nur Text el.innerHTML = "<strong>HTML</strong>" # HTML-Code el.innerText = "Text" # Sichtbarer Text (wie dargestellt)

Inhalt ändern – textContent setzt reinen Text, innerHTML kann HTML-Tags enthalten, innerText berücksichtigt CSS-Styling.

Beispiele

// Text setzen (sicher)

element.textContent = "Das ist ein Text"

// HTML setzen (vorsichtig verwenden!)

element.innerHTML = `<span style="color: red">HTML Inhalt</span>`

// Unterschied zwischen textContent und innerText

// textContent: gibt ALLEN Text zurück (auch versteckten)

// innerText: gibt NUR sichtbaren Text zurück (CSS-berücksichtigt)

// Wert eines Input-Feldes

input.value = "Neuer Wert"

⚠️ Achtung: innerHTML mit Benutzereingaben kann zu Cross-Site-Scripting (XSS) führen. Verwenden Sie textContent für Benutzereingaben!

Attribute & Klassen – setAttribute, classList

setAttribute() · getAttribute() · classList

el.setAttribute("id", "meinId") el.classList.add("active") el.classList.remove("hidden") el.classList.toggle("selected")

Attribute und Klassen – mit setAttribute() und classList können Sie beliebige Attribute und CSS-Klassen verwalten.

Wichtige Methoden

Methode	Beschreibung
setAttribute(name, wert)	Attribut setzen oder hinzufügen
getAttribute(name)	Attribut-Wert abrufen
removeAttribute(name)	Attribut entfernen
classList.add(klasse)	CSS-Klasse hinzufügen
classList.remove(klasse)	CSS-Klasse entfernen
classList.toggle(klasse)	CSS-Klasse ein-/ausschalten
classList.contains(klasse)	Prüfen, ob Klasse vorhanden ist

Beispiele

// Attribute

el.setAttribute("data-id", "123")

id = el.getAttribute("data-id") // "123"

el.removeAttribute("hidden")

// Klassen

el.classList.add("active", "highlight")

el.classList.remove("inactive")

el.classList.toggle("visible") // Schaltet hinzu/entfernt

// Prüfen

if (el.classList.contains("active")) {

console.log("Ist aktiv")

}

Tipp: classList.toggle() ist ideal für Menüs, Toggle-Buttons oder Dark-Mode – es fügt die Klasse hinzu, wenn sie fehlt, und entfernt sie, wenn sie vorhanden ist.

Event Listener – addEventListener, Event-Objekt

addEventListener() · removeEventListener()

el.addEventListener("click", function(event) { ... }) el.removeEventListener("click", handler)

Event Listener reagieren auf Benutzerinteraktionen wie Klicks, Tastatureingaben oder Mausbewegungen.

Die wichtigsten Events

Event	Beschreibung
click	Klick auf ein Element
dblclick	Doppelklick
mouseover / mouseout	Maus betritt / verlässt Element
keydown / keyup / keypress	Tastatur-Ereignisse
submit	Formular wird abgesendet
input / change	Eingabe-Feld ändert sich
scroll	Seite oder Element wird gescrollt
load / DOMContentLoaded	Seite oder Ressource geladen
contextmenu	Rechtsklick (Kontextmenü)

Beispiele

// Klick-Event

button.addEventListener("click", function() {

console.log("Button geklickt!")

})

// Event-Objekt verwenden

element.addEventListener("click", function(event) {

console.log(event.target) // Geklicktes Element

console.log(event.type) // "click"

event.preventDefault() // Standard-Aktion verhindern

})

// Formular-Submit verhindern

form.addEventListener("submit", function(e) {

e.preventDefault()

// Eigene Logik statt Seiten-Neuladen

})

// Arrow-Funktion (kürzer)

el.addEventListener("click", () => console.log("Geklickt"))

Tipp: Verwenden Sie event.preventDefault(), um das Standardverhalten zu unterbinden (z.B. Formular-Submit oder Link-Navigation). Mit event.stopPropagation() verhindern Sie das Bubbling.

Styles – style, CSS-Klassen, getComputedStyle

element.style · className · getComputedStyle()

el.style.color = "red" el.style.backgroundColor = "blue" el.className = "neue-klasse" getComputedStyle(el).color

Styles verwalten – mit style setzen Sie Inline-Styles, mit className und classList verwalten Sie CSS-Klassen.

Beispiele

// Inline-Styles setzen

el.style.color = "#ff6b6b"

el.style.fontSize = "20px"

el.style.display = "none" // Element ausblenden

// Mehrere Styles auf einmal (Template-String)

el.style.cssText = `color: red; font-size: 18px;`

// Klasse setzen (überschreibt alle!)

el.className = "meine-klasse"

// Klassen verwalten (besser)

el.classList.add("active")

el.classList.remove("hidden")

// Berechnete Styles auslesen

color = getComputedStyle(el).color

console.log(color) // z.B. "rgb(255, 0, 0)"

// Element ein-/ausblenden

el.style.display = "none" // ausblenden

el.style.display = "block" // einblenden

Tipp: Für CSS-Eigenschaften mit Bindestrich (z.B. background-color) verwenden Sie die CamelCase-Schreibweise in JavaScript: backgroundColor.

DOM-Manipulation im Überblick

Select Elemente finden
querySelector, getElementById

Create Neue Elemente
createElement, appendChild

Read/Write Inhalt ändern
textContent, innerHTML

Attributes Attribute & Klassen
setAttribute, classList

Events Interaktionen
addEventListener

Styles CSS verwalten
style, classList

Quick Summary

querySelector

Element finden

createElement

Element erstellen

textContent

Inhalt setzen

classList

Klassen verwalten

addEventListener

Events

style

CSS ändern

document.querySelector("#id") · el.textContent = "Text" · el.addEventListener("click", () => {})