JavaScript-DOM-Manipulation

JavaScript-DOM-Manipulation (Document Object Model) ist eine grundlegende Fähigkeit für Webentwickler. Sie ermöglicht es uns, den Inhalt und die Struktur einer Webseite dynamisch zu ändern. In diesem umfassenden Leitfaden werden wir verschiedene Techniken und Methoden untersuchen, um den DOM mit JavaScript zu manipulieren. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, dieser Leitfaden bietet Ihnen wertvolle Einblicke und Beispiele, um Ihre Fähigkeiten zu verbessern.

Ändern von Elementinhalt und Attributen

Das Manipulieren des Inhalts und der Attribute von DOM-Elementen ist ein entscheidender Aspekt der dynamischen Webentwicklung. Durch das Ändern des Inhalts können wir den Text oder das HTML innerhalb eines Elements aktualisieren. Durch das Ändern von Attributen können wir Eigenschaften wie class, id oder src modifizieren. JavaScript bietet leistungsstarke Methoden, um diese Aufgaben zu erledigen und ermöglicht uns, reaktionsfähige, interaktive Webanwendungen zu erstellen. Sehen wir uns an, wie innerHTML, textContent, setAttribute und getAttribute effektiv verwendet werden.

Elementinhalt ändern

Wir können den Inhalt eines Elements mit den Eigenschaften innerHTML oder textContent ändern.

innerHTML vs textContent

innerHTML ermöglicht es uns, den HTML-Inhalt eines Elements einschließlich aller HTML-Tags zu setzen oder abzurufen.

html

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML vs textContent</title>
    <style>
        .content-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .html-content {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content-container">
        <p id="content">Original paragraph content.</p>
        <button id="change-innerHTML">Change using innerHTML</button>
        <button id="change-textContent">Change using textContent</button>
    </div>

    <script>
        const content = document.getElementById('content');
        const innerHTMLButton = document.getElementById('change-innerHTML');
        const textContentButton = document.getElementById('change-textContent');

        innerHTMLButton.addEventListener('click', () => {
            content.innerHTML = 'New content with <strong class="html-content">HTML</strong> tags.';
        });

        textContentButton.addEventListener('click', () => {
            content.textContent = 'Updated paragraph content without HTML tags.';
        });
    </script>
</body>
</html>

Try it Yourself »

Erklärung:

innerHTML ermöglicht es uns, den HTML-Inhalt eines Elements einschließlich aller HTML-Tags zu setzen oder abzurufen. Im Beispiel ersetzt ein Klick auf die Schaltfläche "Change using innerHTML" den Absatzinhalt durch neuen Inhalt, der HTML-Tags enthält, wodurch sich das Erscheinungsbild des Textes ändert.
textContent setzt oder liest den Textinhalt eines Elements, ohne HTML-Tags zu parsen. Ein Klick auf die Schaltfläche "Change using textContent" ersetzt den Absatzinhalt durch reinen Text und ignoriert dabei alle HTML-Tags.

INFO

Verwenden Sie textContent, wenn Sie vom Benutzer erzeugte Inhalte einfügen, um Sicherheitsrisiken wie XSS (Cross-Site Scripting) zu vermeiden.

Elementattribute ändern

Wir können die Attribute eines Elements mit der Methode setAttribute ändern und sie mit der Methode getAttribute abrufen. Diese Methoden sind nützlich, um Elemente dynamisch auf Grundlage von Benutzerinteraktionen oder anderen Ereignissen zu ändern.

html

<!DOCTYPE html>
<html>
<head>
    <title>setAttribute and getAttribute</title>
</head>
<body>
    <div id="container" class="initial-class">Container content</div>
    <button id="change-attribute">Change Attribute</button>
    <button id="get-attribute">Get Attribute</button>

    <script>
        const container = document.getElementById('container');
        const changeAttributeButton = document.getElementById('change-attribute');
        const getAttributeButton = document.getElementById('get-attribute');

        changeAttributeButton.addEventListener('click', () => {
            container.setAttribute('class', 'new-class');
            alert('Class attribute changed to "new-class"');
        });

        getAttributeButton.addEventListener('click', () => {
            const className = container.getAttribute('class');
            alert(`Current class attribute: ${className}`);
        });
    </script>
</body>
</html>

Try it Yourself »

Erklärung:

setAttribute('attributeName', 'value'): Diese Methode ermöglicht es uns, einen neuen Wert für ein bestimmtes Attribut eines Elements festzulegen. Im Beispiel ändert ein Klick auf die Schaltfläche "Change Attribute" das class-Attribut des <div> von "initial-class" zu "new-class".
getAttribute('attributeName'): Diese Methode ruft den aktuellen Wert des angegebenen Attributs ab. Ein Klick auf die Schaltfläche "Get Attribute" zeigt eine Warnmeldung mit dem aktuellen class-Attributwert des <div> an.

INFO

Verwenden Sie setAttribute und getAttribute immer für benutzerdefinierte Attribute und dynamisch erzeugte Attribute. Für die Manipulation von Klassen sollten Sie classList.add(), classList.remove() und classList.toggle() für eine sauberere und sicherere Syntax in Betracht ziehen.

javascript

element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

Elemente hinzufügen und entfernen

Wir können dem DOM neue Elemente hinzufügen oder vorhandene Elemente entfernen.

Elemente hinzufügen

Um dem DOM neue Elemente hinzuzufügen, erstellen wir sie zunächst mit der Methode createElement, hängen sie dann mit appendChild an ein vorhandenes Element an oder fügen sie mit insertBefore an einer bestimmten Position ein.

createElement(), appendChild(), insertBefore()

html

<!DOCTYPE html>
<html>
<head>
    <title>Adding Elements</title>
</head>
<body>
    <div id="task-list">
        <h2>Task List</h2>
        <ul id="tasks">
            <li>Initial task</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
        <button id="insert-before">Insert Before First Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');
        const insertBeforeButton = document.getElementById('insert-before');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        insertBeforeButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                const firstTask = taskList.firstElementChild;
                taskList.insertBefore(newTask, firstTask);
            }
        });
    </script>
</body>
</html>

Try it Yourself »

Erklärung:

createElement('tagName'): Diese Methode erstellt ein neues Element, das durch tagName angegeben wird. Zum Beispiel erstellt document.createElement('li') ein neues <li>-Element.
appendChild(newElement): Diese Methode hängt ein neues Kindelement an ein angegebenes übergeordnetes Element an. Im Beispiel erstellt ein Klick auf die Schaltfläche "Add Task" ein neues Listenelement (<li>) und hängt es an die Aufgabenliste (<ul>) an.
insertBefore(newElement, referenceElement): Diese Methode fügt ein neues Element vor einem angegebenen Referenzelement innerhalb desselben übergeordneten Elements ein. Ein Klick auf die Schaltfläche "Insert Before First Task" erstellt ein neues Listenelement (<li>) und fügt es vor der ersten Aufgabe in der Liste ein.

note
Für das direkte Einfügen von HTML-Strings sollten Sie insertAdjacentHTML() in Betracht ziehen. Um ein vorhandenes Element zu ersetzen, ist element.replaceWith(newElement) eine moderne Alternative zur Kombination aus remove() und appendChild().

Elemente entfernen

Um ein Element zu entfernen, können wir die moderne Methode element.remove() verwenden.

html

<!DOCTYPE html>
<html>
<head>
    <title>Removing Elements</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph.</p>
        <button id="remove-paragraph">Remove Paragraph</button>
    </div>

    <script>
        const container = document.getElementById('container');
        const paragraph = document.getElementById('paragraph');
        const removeParagraphButton = document.getElementById('remove-paragraph');

        removeParagraphButton.addEventListener('click', () => {
            paragraph.remove();
        });
    </script>
</body>
</html>

Try it Yourself »

Erklärung:

element.remove(): Diese moderne Methode entfernt ein angegebenes Element direkt aus dem DOM. Im Beispiel entfernt ein Klick auf die Schaltfläche "Remove Paragraph" das <p>-Element von der Seite.

INFO

Die Verwendung von element.remove() ist der empfohlene Ansatz für dynamische Inhaltsänderungen, wie das Entfernen von Artikeln aus einem Warenkorb, da sie eine sauberere Syntax als die veraltete Methode removeChild bietet.

Beispiel: Dynamische To-do-Liste

Lassen Sie uns eine einfache To-do-Listen-Anwendung erstellen, um die oben genannten Konzepte zu demonstrieren.

html

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <div id="todo-list">
        <h2>My To-Do List</h2>
        <ul id="tasks">
            <li>Learn JavaScript</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        taskList.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                event.target.remove();
            }
        });
    </script>
</body>
</html>

Try it Yourself »

Erklärung:

createElement erstellt ein neues Listenelement für die Aufgabe.
appendChild fügt die neue Aufgabe zur Aufgabenliste hinzu.
element.remove() entfernt eine Aufgabe aus der Aufgabenliste, wenn sie angeklickt wird.

note
(Hinweis: Die Logik zum Hinzufügen von Aufgaben folgt demselben Muster, das im Abschnitt „Elemente hinzufügen“ gezeigt wurde.)

INFO

Wenn Sie mit großen Datenmengen arbeiten, sollten Sie virtuelle DOM-Bibliotheken wie React in Betracht ziehen, um die Leistung zu optimieren und Aktualisierungen effizienter zu verwalten.

Fazit

Die Beherrschung der DOM-Manipulation ist entscheidend für die Erstellung dynamischer und interaktiver Webanwendungen. Durch das Verständnis und die Nutzung von Methoden zum Ändern von Inhalten und Attributen sowie zum Hinzufügen oder Entfernen von Elementen können wir reaktionsfähige Benutzeroberflächen erstellen, die das Benutzererlebnis verbessern. Die kontinuierliche Verfeinerung dieser Techniken stellt eine hochwertige, performante Webentwicklung sicher.

Practice

Welche der folgenden Methoden kann verwendet werden, um den Inhalt eines DOM-Elements zu ändern?

innerHTMLtextContentsetAttributegetElementById

JavaScript-DOM-Manipulation ​

Ändern von Elementinhalt und Attributen ​

Elementinhalt ändern ​

innerHTML vs textContent ​

Elementattribute ändern ​

Elemente hinzufügen und entfernen ​

Elemente hinzufügen ​

createElement(), appendChild(), insertBefore() ​

Elemente entfernen ​

Beispiel: Dynamische To-do-Liste ​

Fazit ​

Practice ​

JavaScript-DOM-Manipulation

Ändern von Elementinhalt und Attributen

Elementinhalt ändern

innerHTML vs textContent

Elementattribute ändern

Elemente hinzufügen und entfernen

Elemente hinzufügen

createElement(), appendChild(), insertBefore()

Elemente entfernen

Beispiel: Dynamische To-do-Liste

Fazit

Practice