Kapitel 13: DOM-Grundlagen (Webseiten-Elemente manipulieren)

DOM (Document Object Model) ist die Schnittstelle zwischen JavaScript und Webseiten. In diesem Kapitel lernen Sie, wie Sie Webseiten mit JavaScript manipulieren.

13.1 Was ist DOM? Dokument-Objekt-Modell

DOM ist eine Baumstruktur, die ein HTML-Dokument repräsentiert.

DOM-Baum (Vereinfacht)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p class="text">Dies ist ein Absatz.</p>
  </body>
</html>

DOM-Baum:

window
 └── document
      ├── html
      │    ├── head
      │    │    └── title
      │    └── body
      │         ├── h1
      │         └── p.text

Warum DOM wichtig ist

Ohne DOM	Mit DOM
Webseite ist statisch	Webseite ist interaktiv
Inhalt kann nicht geändert werden	Inhalt kann dynamisch geändert werden
Keine Benutzerinteraktion	Reagiert auf Benutzeraktionen

13.2 Webseiten-Elemente abrufen (5 Methoden)

1. `getElementById()` (Am häufigsten)

html

<h1 id="titel">Alter Titel</h1>

<script>
    let titelElement = document.getElementById("titel");
    console.log(titelElement);  // <h1 id="titel">Alter Titel</h1>
    console.log(titelElement.textContent);  // "Alter Titel"
</script>

2. `getElementsByClassName()`

html

<p class="text">Absatz 1</p>
<p class="text">Absatz 2</p>

<script>
    let absaetze = document.getElementsByClassName("text");
    console.log(absaetze.length);  // 2
    console.log(absaetze[0]);      // Erstes <p>
</script>

3. `getElementsByTagName()`

html

<p>Absatz 1</p>
<p>Absatz 2</p>

<script>
    let absaetze = document.getElementsByTagName("p");
    console.log(absaetze.length);  // 2
</script>

4. `querySelector()` (Modern, empfohlen)

html

<div id="container">
    <p class="text">Hallo!</p>
</div>

<script>
    // Erstes passendes Element
    let container = document.querySelector("#container");
    let absatz = document.querySelector(".text");
    
    console.log(container);  // <div id="container">...</div>
    console.log(absatz);     // <p class="text">Hallo!</p>
</script>

5. `querySelectorAll()` (Alle passenden Elemente)

html

<p class="text">Absatz 1</p>
<p class="text">Absatz 2</p>

<script>
    let alleAbsaetze = document.querySelectorAll(".text");
    console.log(alleAbsaetze.length);  // 2
    
    // Durch alle iterieren
    alleAbsaetze.forEach(function(absatz) {
        console.log(absatz.textContent);
    });
</script>

13.3 Element-Inhalt manipulieren: `innerText` / `innerHTML`

`innerText` (Nur Text)

html

<div id="inhalt">Dies ist <strong>wichtig</strong>.</div>

<script>
    let div = document.getElementById("inhalt");
    
    // Text auslesen (ohne HTML-Tags)
    console.log(div.innerText);  // "Dies ist wichtig."
    
    // Text ändern (HTML-Tags werden als Text angezeigt)
    div.innerText = "Neuer <strong>Text</strong>";
    // Ergebnis: "Neuer <strong>Text</strong>" (als Text)
</script>

`innerHTML` (HTML erlaubt)

html

<div id="inhalt">Alter Inhalt</div>

<script>
    let div = document.getElementById("inhalt");
    
    // HTML auslesen
    console.log(div.innerHTML);  // "Alter Inhalt"
    
    // HTML ändern (HTML-Tags werden interpretiert!)
    div.innerHTML = "Neuer <strong>Text</strong>";
    // Ergebnis: "Neuer **Text**" (fettgedruckt)
</script>

Unterschied: `innerText` vs `innerHTML`

Eigenschaft	`innerText`	`innerHTML`
HTML-Tags	Werden ignoriert (als Text)	Werden interpretiert
Sicherheit	Sicherer (XSS-Schutz)	Unsicherer (XSS-Gefahr)
Geschwindigkeit	Schneller	Langsamer
Empfehlung	✅ Für reinen Text	⚠️ Nur wenn HTML nötig

⚠️ Sicherheitswarnung:

javascript

// GEFÄHRLICH (XSS-Angriff möglich!)
div.innerHTML = "<script>alert('Hacked!')</script>";

// SICHER
div.innerText = "<script>alert('Hacked!')</script>";  // Als Text angezeigt

13.4 Element-Attribute manipulieren: `src`/`href`/`class`/`style`

Attribute abrufen und ändern

html

<img id="bild" src="altes-bild.jpg" alt="Bild">
<a id="link" href="https://google.com">Google</a>

<script>
    // 1. Bild-Quelle ändern
    let bild = document.getElementById("bild");
    console.log(bild.src);  // "https://.../altes-bild.jpg"
    bild.src = "neues-bild.jpg";
    
    // 2. Link-Ziel ändern
    let link = document.getElementById("link");
    console.log(link.href);  // "https://google.com"
    link.href = "https://example.com";
    
    // 3. Andere Attribute
    link.target = "_blank";  // In neuem Tab öffnen
    link.textContent = "Example";  // Link-Text ändern
</script>

`getAttribute()` / `setAttribute()`

html

<input type="text" id="name" value="Max" data-id="123">

<script>
    let input = document.getElementById("name");
    
    // Attribute abrufen
    console.log(input.getAttribute("value"));  // "Max"
    console.log(input.getAttribute("data-id"));  // "123"
    
    // Attribute setzen
    input.setAttribute("value", "Moritz");
    input.setAttribute("placeholder", "Namen eingeben...");
</script>

13.5 Element-Stile manipulieren: Inline-Stile / CSS-Klassen

Methode 1: Inline-Stile (`style`)

html

<div id="box">Inhalt</div>

<script>
    let box = document.getElementById("box");
    
    // Stile direkt setzen (Inline-Stile)
    box.style.backgroundColor = "blau";
    box.style.color = "weis";
    box.style.padding = "20px";
    box.style.borderRadius = "10px";  // camelCase für CSS-Eigenschaften!
    
    // Stile auslesen (nur Inline-Stile!)
    console.log(box.style.backgroundColor);  // "blau"
</script>

⚠️ Nachteil von Inline-Stilen:

Überschreibt externe CSS-Dateien
Schwer zu warten
Nicht empfohlen für komplexe Styles

Methode 2: CSS-Klassen manipulieren (Empfohlen!)

html

<style>
    .highlight {
        background-color: gelb;
        font-weight: bold;
    }
    
    .versteckt {
        display: none;
    }
</style>

<div id="text">Dieser Text kann hervorgehoben werden.</div>
<button id="btn">Hervorheben</button>

<script>
    let text = document.getElementById("text");
    let btn = document.getElementById("btn");
    
    // Klasse hinzufügen
    btn.addEventListener("click", function() {
        text.classList.add("highlight");
    });
    
    // Klasse entfernen
    text.classList.remove("highlight");
    
    // Klasse umschalten (wenn vorhanden → entfernen, wenn nicht → hinzufügen)
    text.classList.toggle("highlight");
    
    // Prüfen, ob Klasse vorhanden ist
    if (text.classList.contains("highlight")) {
        console.log("Text ist hervorgehoben.");
    }
</script>

`className` (Alle Klassen auf einmal ändern - Achtung!)

javascript

let div = document.getElementById("meineDiv");

// Alle Klassen überschreiben (Achtung!)
div.className = "neue-klasse";  // Alte Klassen werden gelöscht!

// Besser: classList verwenden
div.classList.add("neue-klasse");  // Behält alte Klassen!

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ DOM ist eine Baumstruktur des HTML-Dokuments
✅ Elemente abrufen: getElementById(), querySelector(), etc.
✅ Inhalt ändern: innerText (Text) vs innerHTML (HTML)
✅ Attribute ändern: src, href, setAttribute()
✅ Stile ändern: style (Inline) vs classList (CSS-Klassen)
✅ classList.add() / remove() / toggle() / contains()

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Ereignisse (Events) - wie Ihre Webseite auf Benutzeraktionen reagiert!

Übung:

Erstellen Sie eine HTML-Datei mit einer Überschrift und einem Button
Verwenden Sie JavaScript, um die Überschrift beim Button-Klick zu ändern
Ändern Sie das Bild eines <img>-Elements, wenn der Button geklickt wird
Fügen Sie eine CSS-Klasse hinzu, um ein Element hervorzuheben
Testen Sie alles im Browser

Kapitel 13: DOM-Grundlagen (Webseiten-Elemente manipulieren) ​

13.1 Was ist DOM? Dokument-Objekt-Modell ​

DOM-Baum (Vereinfacht) ​

Warum DOM wichtig ist ​

13.2 Webseiten-Elemente abrufen (5 Methoden) ​

1. getElementById() (Am häufigsten) ​

2. getElementsByClassName() ​

3. getElementsByTagName() ​

4. querySelector() (Modern, empfohlen) ​

5. querySelectorAll() (Alle passenden Elemente) ​

13.3 Element-Inhalt manipulieren: innerText / innerHTML ​

innerText (Nur Text) ​

innerHTML (HTML erlaubt) ​

Unterschied: innerText vs innerHTML ​

13.4 Element-Attribute manipulieren: src/href/class/style ​

Attribute abrufen und ändern ​

getAttribute() / setAttribute() ​

13.5 Element-Stile manipulieren: Inline-Stile / CSS-Klassen ​

Methode 1: Inline-Stile (style) ​

Methode 2: CSS-Klassen manipulieren (Empfohlen!) ​

className (Alle Klassen auf einmal ändern - Achtung!) ​

📝 Zusammenfassung ​

➡️ Nächster Schritt ​

Kapitel 13: DOM-Grundlagen (Webseiten-Elemente manipulieren)

13.1 Was ist DOM? Dokument-Objekt-Modell

DOM-Baum (Vereinfacht)

Warum DOM wichtig ist

13.2 Webseiten-Elemente abrufen (5 Methoden)

1. `getElementById()` (Am häufigsten)

2. `getElementsByClassName()`

3. `getElementsByTagName()`

4. `querySelector()` (Modern, empfohlen)

5. `querySelectorAll()` (Alle passenden Elemente)

13.3 Element-Inhalt manipulieren: `innerText` / `innerHTML`

`innerText` (Nur Text)

`innerHTML` (HTML erlaubt)

Unterschied: `innerText` vs `innerHTML`

13.4 Element-Attribute manipulieren: `src`/`href`/`class`/`style`

Attribute abrufen und ändern

`getAttribute()` / `setAttribute()`

13.5 Element-Stile manipulieren: Inline-Stile / CSS-Klassen

Methode 1: Inline-Stile (`style`)

Methode 2: CSS-Klassen manipulieren (Empfohlen!)

`className` (Alle Klassen auf einmal ändern - Achtung!)

📝 Zusammenfassung

➡️ Nächster Schritt