Inhalte und Styles ändern

Nachdem Sie gelernt haben, wie man Elemente im DOM auswählt, ist der nächste Schritt, deren Inhalte und Erscheinungsbild dynamisch zu verändern. Dies ist ein zentraler Aspekt interaktiver Webseiten, da es Ihnen ermöglicht, auf Benutzeraktionen zu reagieren und die Benutzeroberfläche entsprechend anzupassen.

Textinhalte ändern

Es gibt mehrere Möglichkeiten, den Textinhalt eines Elements zu ändern, mit leicht unterschiedlichen Ergebnissen:

textContent

Diese Eigenschaft gibt den gesamten Textinhalt eines Elements zurück oder setzt ihn, einschliesslich aller verschachtelten Elemente, aber als reinen Text ohne HTML-Interpretation:

const überschrift = document.querySelector("h1");

// Textinhalt lesen
console.log(überschrift.textContent);

// Textinhalt setzen
überschrift.textContent = "Neuer Titel";

// HTML-Tags werden als Text behandelt, nicht als Markup
überschrift.textContent = "Titel mit <em>Betonung</em>";
// Erscheint als: "Titel mit <em>Betonung</em>"

innerHTML

Mit innerHTML können Sie den HTML-Inhalt eines Elements lesen oder setzen. HTML-Tags werden dabei interpretiert:

const absatz = document.querySelector("p");

// HTML-Inhalt lesen
console.log(absatz.innerHTML);

// HTML-Inhalt setzen
absatz.innerHTML = "Dieser Text enthält <strong>fett</strong> und <em>kursiv</em> formatierte Wörter.";

Sicherheitshinweis: Verwenden Sie innerHTML mit Vorsicht, besonders mit benutzergenerierten Inhalten, da es zu Cross-Site-Scripting (XSS) führen kann. Für reine Textänderungen ist textContent sicherer.

innerText

Eine weitere Option ist innerText, die den sichtbaren Text eines Elements zurückgibt:

const absatz = document.querySelector("p");

// Nur sichtbaren Text lesen
console.log(absatz.innerText);

// Text setzen
absatz.innerText = "Neuer Text";

innerText berücksichtigt im Gegensatz zu textContent die CSS-Formatierung und gibt nur den Text zurück, der tatsächlich für den Benutzer sichtbar ist.

HTML-Struktur verändern

Elemente ersetzen

Sie können ein Element vollständig durch ein anderes ersetzen:

const altesElement = document.querySelector(".alt");
const neuesElement = document.createElement("div");
neuesElement.textContent = "Ich bin das neue Element";
neuesElement.className = "neu";

if (altesElement && altesElement.parentNode) {
    altesElement.parentNode.replaceChild(neuesElement, altesElement);
}

Inhalte leeren

Um alle Inhalte eines Elements zu entfernen:

// Mit innerHTML (einfach, aber weniger effizient)
element.innerHTML = "";

// Mit removeChild (effizienter)
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

Mit Attributen arbeiten

Attribute bieten zusätzliche Informationen über HTML-Elemente und können ebenfalls mit JavaScript manipuliert werden:

Standard-Attribute

const link = document.querySelector("a");

// Attribute lesen
console.log(link.href);
console.log(link.title);
console.log(link.id);

// Attribute setzen
link.href = "https://example.com";
link.title = "Besuchen Sie Example.com";
link.target = "_blank";

HTML5 data-Attribute

HTML5 führte data-*-Attribute ein, die benutzerdefinierte Daten speichern können:

<div id="produkt" data-id="1234" data-kategorie="elektronik" data-preis="99.99">
    Smartphone XYZ
</div>

Zugriff über die dataset-Eigenschaft:

const produkt = document.getElementById("produkt");

// Data-Attribute lesen
console.log(produkt.dataset.id);        // "1234"
console.log(produkt.dataset.kategorie); // "elektronik"
console.log(produkt.dataset.preis);     // "99.99"

// Data-Attribute setzen
produkt.dataset.verfügbar = "ja";
produkt.dataset.rabatt = "10%";

Attribute mit setAttribute und getAttribute

Für allgemeinere Attributmanipulation können Sie diese Methoden verwenden:

const bild = document.querySelector("img");

// Attribut lesen
console.log(bild.getAttribute("alt"));

// Attribut setzen
bild.setAttribute("alt", "Beschreibung des Bildes");
bild.setAttribute("loading", "lazy");

// Prüfen, ob Attribut existiert
if (bild.hasAttribute("src")) {
    console.log("Bild hat eine Quelle");
}

// Attribut entfernen
bild.removeAttribute("width");

CSS-Styles ändern

Es gibt mehrere Wege, das Aussehen von Elementen mit JavaScript zu verändern:

Inline-Styles mit style-Eigenschaft

Die direkteste Methode ist die Verwendung der style-Eigenschaft:

const box = document.querySelector(".box");

// Einzelne Stileigenschaften
box.style.backgroundColor = "lightblue";
box.style.width = "200px";
box.style.padding = "20px";
box.style.borderRadius = "10px";
box.style.boxShadow = "2px 2px 5px rgba(0,0,0,0.2)";

// Mehrere Stile auf einmal mit cssText (überschreibt bestehende inline-Styles)
box.style.cssText = "color: white; background-color: navy; padding: 15px;";

Hinweis: CSS-Eigenschaften mit Bindestrichen werden in JavaScript in camelCase geschrieben:

• background-color → backgroundColor
• font-size → fontSize
• border-radius → borderRadius

CSS-Klassen verwalten

Eine sauberere Methode ist die Verwendung von CSS-Klassen, die Sie in Ihrem Stylesheet definieren und dann mit JavaScript hinzufügen oder entfernen:

const element = document.querySelector(".meinElement");

// Klasse hinzufügen
element.classList.add("highlight");

// Mehrere Klassen hinzufügen
element.classList.add("gross", "wichtig");

// Klasse entfernen
element.classList.remove("alt");

// Klasse umschalten (toggle)
element.classList.toggle("aktiv"); // Fügt die Klasse hinzu, wenn sie fehlt, entfernt sie, wenn sie vorhanden ist

// Prüfen, ob eine Klasse vorhanden ist
if (element.classList.contains("highlight")) {
    console.log("Element ist hervorgehoben");
}

// Eine Klasse durch eine andere ersetzen
element.classList.replace("alt", "neu");

Berechnete Stile abrufen

Manchmal müssen Sie wissen, welche Stile aktuell auf ein Element angewendet werden:

const element = document.querySelector(".meinElement");
const computedStyle = window.getComputedStyle(element);

console.log(computedStyle.backgroundColor);
console.log(computedStyle.fontSize);
console.log(computedStyle.marginTop);

// Pseudo-Elemente
const beforeStyle = window.getComputedStyle(element, "::before");
console.log(beforeStyle.content);

CSS-Variablen (Custom Properties) ändern

CSS-Variablen können mit JavaScript geändert werden, was besonders mächtig ist, da sie sich auf die gesamte Seite auswirken können:

// CSS-Variable auf :root setzen (gilt für die ganze Seite)
document.documentElement.style.setProperty('--main-color', 'blue');

// CSS-Variable auf einem bestimmten Element setzen
const header = document.querySelector("header");
header.style.setProperty('--header-height', '100px');

// CSS-Variablen lesen
const mainColor = getComputedStyle(document.documentElement)
                    .getPropertyValue('--main-color');
console.log("Hauptfarbe:", mainColor);

Übung: Inhalte und Styles dynamisch ändern

Aufgabe: Styling und Inhaltsänderung

Erstellen Sie eine HTML-Datei mit folgender Struktur und schreiben Sie JavaScript-Code für die angegebenen Aufgaben:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Inhalte und Styles ändern</title>
    <style>
        :root {
            --theme-color: #3498db;
            --text-color: #333;
            --bg-color: #fff;
        }

        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .box {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }

        .highlight {
            background-color: var(--theme-color);
            color: white;
        }

        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        button {
            background-color: var(--theme-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        .dark-mode {
            --bg-color: #222;
            --text-color: #eee;
        }
    </style>
</head>
<body>
    <h1 id="titel">Inhalte und Styles dynamisch ändern</h1>

    <div class="controls">
        <button id="themeBtn">Darkmode umschalten</button>
        <button id="colorBtn">Farbe ändern</button>
        <button id="resetBtn">Zurücksetzen</button>
    </div>

    <div class="box" id="inhaltBox">
        <h2>Dieser Inhalt kann geändert werden</h2>
        <p>Klicken Sie auf die Schaltflächen unten, um Änderungen vorzunehmen.</p>
        <button id="textBtn">Text ändern</button>
        <button id="highlightBtn">Hervorheben</button>
    </div>

    <div id="attributeDemo" data-info="Ursprüngliche Information" class="box">
        <h2>Attribute-Demo</h2>
        <p>Dieses Element hat ein data-info Attribut.</p>
        <button id="attributeBtn">Attribut ändern</button>
        <p id="attributeValue"></p>
    </div>

    <div id="cardContainer">
        <h2>Dynamische Karten</h2>
        <button id="addCardBtn">Karte hinzufügen</button>
        <div id="cards"></div>
    </div>

    <template id="cardTemplate">
        <div class="card">
            <h3 class="card-title">Kartentitel</h3>
            <p class="card-text">Kartentext hier...</p>
            <button class="delete-btn">Löschen</button>
        </div>
    </template>

    <script>
        // Hier Ihren JavaScript-Code einfügen
    </script>
</body>
</html>

Aufgaben:

1. Theme-Umschaltung:

   • Implementieren Sie den “Darkmode umschalten”-Button, der die Klasse “dark-mode” zum body-Element hinzufügt oder entfernt
   • Ändern Sie auch den Button-Text entsprechend (“Lightmode umschalten” im Darkmode)

2. Farbe ändern:

   • Beim Klick auf “Farbe ändern” soll die CSS-Variable —theme-color geändert werden
   • Rotieren Sie zwischen mindestens drei verschiedenen Farben

3. Text ändern:

   • Beim Klick auf “Text ändern” soll der Inhalt der “inhaltBox” geändert werden
   • Ersetzen Sie den vorhandenen Text durch einen neuen Text mit HTML-Formatierung

4. Hervorheben-Funktion:

   • Der “Hervorheben”-Button soll die Klasse “highlight” zur inhaltBox hinzufügen oder entfernen
   • Ändern Sie auch den Button-Text entsprechend

5. Attribute Demo:

   • Zeigen Sie den aktuellen Wert des data-info-Attributs im attributeValue-Paragraph an
   • Beim Klick auf “Attribut ändern” soll das data-info-Attribut auf einen neuen Wert gesetzt werden
   • Aktualisieren Sie die Anzeige des Attributwerts

Zusammenfassung

• Sie können den Textinhalt eines Elements mit textContent, innerHTML oder innerText ändern
• Attribute können mit direkten Eigenschaften oder setAttribute/getAttribute manipuliert werden
• Data-Attribute sind über die dataset-Eigenschaft zugänglich
• Styles können über style, CSS-Klassen oder CSS-Variablen geändert werden
• CSS-Klassen sind oft eine sauberere Alternative zu direkten Stiländerungen

Mit diesen Techniken können Sie dynamische, interaktive Webseiten erstellen, die auf Benutzeraktionen reagieren und sich an verschiedene Situationen anpassen. Im nächsten Kapitel lernen wir, wie wir mit Events arbeiten, um auf Benutzerinteraktionen zu reagieren.