09 – DOM-Manipulation 🌐

Brücke zwischen HTML & JavaScript – Inhalte dynamisch steuern

🎯 1. Was ist der DOM?

Der Document Object Model (DOM) ist eine programmierbare Repräsentation deiner Webseite. Der Browser wandelt HTML in einen Baum aus Objekten um – den DOM-Baum.

Mit JavaScript kannst du diesen Baum durchsuchen, ändern, erweitern oder löschen.

📊 2. Übersicht: DOM-Methoden

Aufgabe	Methode	Beispiel
Element finden	`querySelector()`	`document.querySelector("#id")`
Text ändern	`.textContent`	`el.textContent = "Hallo";`
HTML ändern	`.innerHTML`	`el.innerHTML = "<strong>Hallo</strong>";`
Neues Element	`createElement()`	`const li = document.createElement("li");`
Stil ändern	`.style`	`el.style.color = "red";`

🎯 3. Einleitung & W3Schools

DOM-Manipulation ist der Schlüssel zu dynamischen Webseiten. Ohne sie wäre JavaScript „blind“ gegenüber deiner HTML-Struktur.

🔗 W3Schools – JavaScript HTML DOM

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, wann man .textContent und wann .innerHTML verwendet – und wie man sicher neue Elemente im DOM erstellt.

🔍 5. Elemente im DOM finden

Bevor du ein Element ändern kannst, musst du es adressieren. Die moderne Methode: querySelector() mit CSS-Selektoren.

function demoSuchen() {
  const h1 = document.querySelector("h1");
  const button = document.querySelector("button");
  
  document.getElementById("demo-suchen-ausgabe").innerHTML = 
    `<p>Gefunden: <code>h1</code>-Text = „${h1.textContent}“</p>
     <p>Button-Text = „${button.textContent}“</p>`;
}

✏️ 6. Inhalte ändern: Text vs. HTML

⚠️ Sicherheit: innerHTML kann XSS-Angriffe ermöglichen! → Für Benutzereingaben immer .textContent verwenden.

function demoInhalt() {
  const bereich = document.getElementById("demo-inhalt-ausgabe");
  
  bereich.textContent = "Dieser Text enthält <strong>kein HTML</strong>!";
  setTimeout(() => {
    bereich.innerHTML = "Dieser Text enthält <strong>fettes HTML</strong>!";
  }, 1500);
}

➕ 7. Neue Elemente erstellen

Dynamische Webseiten fügen oft Inhalte zur Laufzeit hinzu (z. B. neue Kommentare).

function demoErstellen() {
  const liste = document.getElementById("demo-erstellen-liste");
  
  const neuesLi = document.createElement("li");
  neuesLi.textContent = "🕗 " + new Date().toLocaleTimeString();
  
  if (liste.children.length === 0) {
    const ul = document.createElement("ul");
    ul.appendChild(neuesLi);
    liste.appendChild(ul);
  } else {
    liste.querySelector("ul").appendChild(neuesLi);
  }
}

🎨 8. Stil und Attribute ändern

Du kannst auch das Aussehen und Verhalten von Elementen steuern.

Dieser Bereich ändert sich.

function demoStil() {
  const div = document.getElementById("demo-stil-ziel");
  div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
}

function demoAttribut() {
  const div = document.getElementById("demo-stil-ziel");
  div.setAttribute("data-geaendert", "ja");
  div.textContent = "Attribut 'data-geaendert' wurde gesetzt!";
}