Kapitel 15: DOM-Erweitert (Knoten manipulieren)

In diesem Kapitel lernen Sie, wie Sie DOM-Knoten erstellen, hinzufügen und entfernen.

15.1 Knoten-Hierarchie: Elternknoten / Kindknoten / Geschwisterknoten

DOM ist eine Baumstruktur mit Hierarchie-Ebenen.

Beispiel-HTML

<div id="container">
    <h1>Titel</h1>
    <p>Absatz</p>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
    </ul>
</div>

Hierarchie-Erklärung

#container (Elternknoten / Parent)
 ├── <h1> (Kindknoten / Child)
 ├── <p>  (Kindknoten / Child)
 └── <ul> (Kindknoten / Child)
      ├── <li>Element 1</li> (Kindknoten von ul)
      └── <li>Element 2</li> (Geschwisterknoten / Sibling)

Wichtige Begriffe

Begriff	Englisch	Erklärung
Elternknoten	Parent Node	Übergeordneter Knoten
Kindknoten	Child Node	Untergeordneter Knoten
Geschwisterknoten	Sibling Node	Knoten auf gleicher Ebene

15.2 Knoten erstellen/hinzufügen/entfernen/klonen

1. Knoten erstellen: createElement()

// Neues Element erstellen
let neuesDiv = document.createElement("div");
let neuesParagraph = document.createElement("p");

console.log(neuesDiv);  // <div></div>

2. Textknoten erstellen: createTextNode()

// Textknoten erstellen
let textKnoten = document.createTextNode("Dies ist ein Text.");

// Text zum Element hinzufügen
let paragraph = document.createElement("p");
paragraph.appendChild(textKnoten);

console.log(paragraph);  // <p>Dies ist ein Text.</p>

3. Knoten hinzufügen: appendChild() / insertBefore()

// HTML-Struktur:
// <ul id="liste">
//    <li>Element 1</li>
// </ul>

let liste = document.getElementById("liste");

// A. appendChild() - Am Ende hinzufügen
let neuesElement = document.createElement("li");
neuesElement.textContent = "Element 2";
liste.appendChild(neuesElement);

// Ergebnis:
// <ul id="liste">
//    <li>Element 1</li>
//    <li>Element 2</li>
// </ul>

// B. insertBefore(neuesElement, Bezugselement) - Davor einfügen
let erstesElement = liste.children[0];
let eingefuegtesElement = document.createElement("li");
eingefuegtesElement.textContent = "Element 0";
liste.insertBefore(eingefuegtesElement, erstesElement);

// Ergebnis:
// <ul id="liste">
//    <li>Element 0</li>
//    <li>Element 1</li>
//    <li>Element 2</li>
// </ul>

4. Knoten entfernen: removeChild() / remove()

// HTML-Struktur:
// <ul id="liste">
//    <li>Element 1</li>
//    <li>Element 2</li>
// </ul>

let liste = document.getElementById("liste");
let erstesElement = liste.children[0];

// A. removeChild() - Vom Elternknoten entfernen
liste.removeChild(erstesElement);

// B. remove() - Element selbst entfernen (modern, ES6)
erstesElement.remove();

5. Knoten klonen: cloneNode()

// HTML-Struktur:
// <div id="original">
//    <p>Text</p>
// </div>

let original = document.getElementById("original");

// A. cloneNode(false) - Nur das Element selbst (keine Kinder)
let kopie1 = original.cloneNode(false);
console.log(kopie1);  // <div id="original"></div>

// B. cloneNode(true) - Tiefes Klonen (mit allen Kindern)
let kopie2 = original.cloneNode(true);
console.log(kopie2);  // <div id="original"><p>Text</p></div>

15.3 Praxis: Dynamische Listeneinträge hinzufügen / Waren entfernen

Projekt 1: Dynamische Listeneinträge hinzufügen

<input type="text" id="eingabe" placeholder="Neuer Eintrag...">
<button id="hinzufuegenBtn">Hinzufügen</button>
<ul id="liste"></ul>

<script>
    let eingabe = document.getElementById("eingabe");
    let btn = document.getElementById("hinzufuegenBtn");
    let liste = document.getElementById("liste");

    btn.addEventListener("click", function() {
        // 1. Prüfen, ob Eingabe leer ist
        if (eingabe.value.trim() === "") {
            alert("Bitte geben Sie einen Eintrag ein!");
            return;
        }

        // 2. Neues <li> Element erstellen
        let neuesElement = document.createElement("li");
        neuesElement.textContent = eingabe.value;

        // 3. Löschen-Button zum <li> hinzufügen
        let loeschenBtn = document.createElement("button");
        loeschenBtn.textContent = "Löschen";
        loeschenBtn.style.marginLeft = "10px";
        loeschenBtn.addEventListener("click", function() {
            liste.removeChild(neuesElement);
        });

        neuesElement.appendChild(loeschenBtn);
        liste.appendChild(neuesElement);

        // 4. Eingabefeld leeren
        eingabe.value = "";
    });
</script>

Projekt 2: Waren aus Warenkorb entfernen

<ul id="warenkorb">
    <li data-preis="10">Ware 1 <button class="entfernenBtn">Entfernen</button></li>
    <li data-preis="20">Ware 2 <button class="entfernenBtn">Entfernen</button></li>
    <li data-preis="30">Ware 3 <button class="entfernenBtn">Entfernen</button></li>
</ul>
<p>Gesamtpreis: <span id="gesamtpreis">60</span> €</p>

<script>
    let entfernenButtons = document.querySelectorAll(".entfernenBtn");
    let gesamtpreisElement = document.getElementById("gesamtpreis");
    let gesamtpreis = 60;

    entfernenButtons.forEach(function(btn) {
        btn.addEventListener("click", function() {
            // 1. <li> Element finden (Elternknoten vom Button)
            let listeElement = this.parentElement;
            
            // 2. Preis abrufen und Gesamtpreis aktualisieren
            let preis = parseInt(listeElement.getAttribute("data-preis"));
            gesamtpreis -= preis;
            gesamtpreisElement.textContent = gesamtpreis;

            // 3. <li> Element entfernen
            listeElement.remove();
        });
    });
</script>

Projekt 3: Kommentare hinzufügen und löschen

<textarea id="kommentarEingabe" placeholder="Ihr Kommentar..."></textarea>
<button id="sendenBtn">Senden</button>
<div id="kommentarBereich"></div>

<script>
    let kommentarEingabe = document.getElementById("kommentarEingabe");
    let sendenBtn = document.getElementById("sendenBtn");
    let kommentarBereich = document.getElementById("kommentarBereich");

    sendenBtn.addEventListener("click", function() {
        if (kommentarEingabe.value.trim() === "") {
            alert("Bitte geben Sie einen Kommentar ein!");
            return;
        }

        // 1. Neues Kommentar-Element erstellen
        let kommentarDiv = document.createElement("div");
        kommentarDiv.classList.add("kommentar");
        kommentarDiv.style.border = "1px solid #ccc";
        kommentarDiv.style.padding = "10px";
        kommentarDiv.style.margin = "10px 0";

        // 2. Kommentartext hinzufügen
        let kommentarText = document.createElement("p");
        kommentarText.textContent = kommentarEingabe.value;
        kommentarDiv.appendChild(kommentarText);

        // 3. Löschen-Button hinzufügen
        let loeschenBtn = document.createElement("button");
        loeschenBtn.textContent = "Löschen";
        loeschenBtn.addEventListener("click", function() {
            kommentarDiv.remove();
        });
        kommentarDiv.appendChild(loeschenBtn);

        // 4. Kommentar zum Bereich hinzufügen
        kommentarBereich.appendChild(kommentarDiv);

        // 5. Eingabe leeren
        kommentarEingabe.value = "";
    });
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ DOM-Knoten-Hierarchie: Elternknoten, Kindknoten, Geschwisterknoten
• ✅ createElement() - Knoten erstellen
• ✅ createTextNode() - Textknoten erstellen
• ✅ appendChild() / insertBefore() - Knoten hinzufügen
• ✅ removeChild() / remove() - Knoten entfernen
• ✅ cloneNode() - Knoten klonen
• ✅ Praxis-Projekte: Dynamische Liste, Warenkorb, Kommentare

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Formularvalidierung - wie man Eingabedaten prüft!

---

Übung:

1. Erstellen Sie eine HTML-Datei mit einer Liste und einem Eingabefeld
2. Fügen Sie Elemente zur Liste hinzu, wenn der Benutzer auf einen Button klickt
3. Fügen Sie jedem Listenelement einen Löschen-Button hinzu
4. Testen Sie alles im Browser