JavaScript DOM traversieren

Das Traversieren des DOM (Document Object Model) ist eine grundlegende Fähigkeit für Webentwickler, die JavaScript verwenden. Wenn Sie DOM-Traversal beherrschen, können Sie Webseiten dynamisch manipulieren und interaktive, reaktionsfähige Nutzererlebnisse schaffen. Dieser Leitfaden bietet Ihnen ausführliche Erklärungen und mehrere Codebeispiele, um Ihnen zu helfen, DOM-Traversal zu meistern.

Einführung in DOM-Traversal

Das DOM stellt die Struktur einer Webseite als Baum von Knoten dar. Jeder Knoten entspricht einem Element, einem Textstück oder einem Kommentar auf der Seite. Traversieren des DOM bedeutet, von einem Knoten zum nächsten zu wechseln — aufwärts zu einem Elternelement, abwärts zu Kindelementen oder seitwärts zu Geschwisterelementen —, um Elemente relativ zu einem Ausgangspunkt zu lesen oder zu verändern.

Warum traversieren statt einfach auswählen? Oft beginnen Sie mit einem Element, das Sie bereits haben (z. B. der Button, den ein Benutzer gerade geklickt hat), und müssen ein verwandtes Element erreichen, dessen genaue id oder Klasse Sie im Voraus nicht kennen — seinen Container, das nächste Element in einer Liste oder alle verschachtelten Antworten darunter. Traversal drückt aus: "das Ding neben / innerhalb / um dieses herum."

Dieser Leitfaden behandelt die Beziehungseigenschaften, die Sie am häufigsten verwenden:

Richtung	Nur-Element-Eigenschaft	Alles-enthaltende Eigenschaft
Abwärts (Kinder)	`children`, `firstElementChild`, `lastElementChild`	`childNodes`, `firstChild`, `lastChild`
Aufwärts (Elternteil)	`parentElement`	`parentNode`
Seitwärts (Geschwister)	`nextElementSibling`, `previousElementSibling`	`nextSibling`, `previousSibling`

Die linke Spalte überspringt Text- und Kommentarknoten, was fast immer das ist, was Sie möchten. Die rechte Spalte enthält Leerzeichen-Textknoten zwischen Tags, was eine häufige Fehlerquelle ist.

Zum Suchen von Elementen irgendwo im Dokument (anstatt relativ zu einem Knoten) siehe Suchen: getElement* und querySelector und DOM-Elemente auswählen.

Den DOM-Baum verstehen

Bevor Sie in Traversal-Methoden eintauchen, hilft es, sich den DOM-Baum vorzustellen. Hier ist ein einfaches HTML-Dokument zur Veranschaulichung:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Traversal Example</title>
</head>
<body>
    <div id="container">
        <p class="text">Hello, World!</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>
</html>

In diesem Dokument enthält das <body>-Element ein <div> mit der id container, das wiederum ein <p>-Element und eine <ul> mit <li>-Kindelementen enthält. Mehr darüber, wie der Browser jedes Stück klassifiziert (Element, Text, Kommentar), erfahren Sie unter DOM-Knoten verstehen.

Grundlegende Traversal-Methoden

Auf Kindknoten zugreifen

Stellen Sie sich vor, Sie haben einen Blog mit mehreren Beiträgen, und jeder Beitrag hat Kommentare. Sie möchten die Kommentare für einen bestimmten Beitrag zählen.

<!DOCTYPE html>
<html>
<head>
    <title>Accessing Child Nodes</title>
</head>
<body>
    <div id="blog-post">
        <h2>Blog Post Title</h2>
        <p>Some interesting content...</p>
        <div class="comments">
            <p>Comment 1</p>
            <p>Comment 2</p>
            <p>Comment 3</p>
        </div>
    </div>

    <script>
        const commentsContainer = document.querySelector('.comments');
        const comments = commentsContainer.children; // Only includes element nodes

        // Display the number of comments
        console.log(`Number of comments: ${comments.length}`);
    </script>
</body>
</html>

Probier es selbst »

Dieser Code wählt das <div> mit der Klasse „comments" aus und zeigt die Anzahl der Kommentarelemente darin an. Hinweis: children gibt nur Elementknoten zurück, während childNodes auch Text- und Kommentarknoten einschließt. Für das Traversieren nur über Elemente bevorzugen Sie children.

Zu übergeordneten Knoten navigieren

Stellen Sie sich vor, Sie haben eine Liste von Artikeln in einem Warenkorb und möchten das Container-Element eines bestimmten Artikels finden.

<!DOCTYPE html>
<html>
<head>
    <title>Navigating to Parent Nodes</title>
</head>
<body>
    <div id="shopping-cart">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

    <script>
        const cartItem = document.querySelector('li');
        const parent = cartItem.parentNode;

        // Display the parent node
        console.log(`The parent of the first cart item is a: ${parent.tagName}`);
    </script>
</body>
</html>

Probier es selbst »

Dieser Code wählt das erste <li>-Element aus und zeigt den Tag-Namen seines übergeordneten Knotens an. Für die reine Elementnavigation wird parentElement oft gegenüber parentNode bevorzugt, da es Textknoten überspringt und null zurückgibt, wenn das Elternelement kein Element ist.

Geschwisterknoten

Stellen Sie sich vor, Sie haben eine Aufgabenliste, in der Sie Aufgaben als erledigt markieren und dann zur nächsten Aufgabe wechseln können.

<!DOCTYPE html>
<html>
<head>
    <title>Task List Navigation</title>
    <style>
        .task {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .completed {
            text-decoration: line-through;
            color: gray;
        }
    </style>
</head>
<body>
    <div class="task-list">
        <div class="task">
            <p>Task 1: Do the laundry</p>
            <button class="complete-task">Complete Task</button>
        </div>
        <div class="task">
            <p>Task 2: Buy groceries</p>
            <button class="complete-task">Complete Task</button>
        </div>
        <div class="task">
            <p>Task 3: Clean the house</p>
            <button class="complete-task">Complete Task</button>
        </div>
    </div>

    <script>
        document.querySelectorAll('.complete-task').forEach(button => {
            button.addEventListener('click', () => {
                const task = button.parentElement;
                task.classList.add('completed');
                button.disabled = true;

                const nextTask = task.nextElementSibling;
                if (nextTask) {
                    console.log(`Next task: ${nextTask.querySelector('p').textContent}`);
                } else {
                    console.log('No more tasks available');
                }
            });
        });
    </script>
</body>
</html>

Probier es selbst »

Dieser Code stellt eine Aufgabenliste bereit, bei der jede Aufgabe einen „Aufgabe erledigen"-Button hat. Wenn eine Aufgabe als erledigt markiert wird, wird der Text durchgestrichen und der Button deaktiviert. Außerdem wird die Beschreibung der nächsten Aufgabe angezeigt. Sind keine weiteren Aufgaben vorhanden, wird dies entsprechend angezeigt. Ebenso überspringen previousElementSibling und nextElementSibling Textknoten, was sie für das reine Elementtraversieren sicherer macht als previousSibling und nextSibling.

Erweiterte Traversal-Techniken

Elemente nach Klasse oder Tag finden

Stellen Sie sich vor, Sie erstellen ein Dashboard, das alle Benutzer auflistet, und Sie möchten alle Benutzerelemente finden und zählen.

<!DOCTYPE html>
<html>
<head>
    <title>Finding Elements by Class or Tag</title>
</head>
<body>
    <div class="user">User 1</div>
    <div class="user">User 2</div>
    <div class="user">User 3</div>

    <script>
        const users = document.getElementsByClassName('user');

        // Display the number of users
        console.log(`Number of users: ${users.length}`);
    </script>
</body>
</html>

Probier es selbst »

Dieser Code zählt und zeigt die Anzahl der Elemente mit der Klasse user an. Ein subtiles, aber wichtiges Detail: getElementsByClassName (und getElementsByTagName) gibt eine live HTMLCollection zurück — sie wird automatisch aktualisiert, wenn sich das DOM ändert. Wenn Sie später ein viertes .user-Element hinzufügen, wird users.length zu 4, ohne dass eine erneute Abfrage nötig ist. querySelectorAll hingegen gibt eine statische NodeList zurück, die eine Momentaufnahme zum Zeitpunkt des Aufrufs ist. Vergleichen Sie beide unter Suchen: getElement* und querySelector.

Query-Selector-Methoden

Stellen Sie sich vor, Sie haben eine Nachrichtenwebsite und möchten alle Schlagzeilen hervorheben.

<!DOCTYPE html>
<html>
<head>
    <title>Query Selector Methods</title>
</head>
<body>
    <div id="news">
        <h1 class="headline">Headline 1</h1>
        <h1 class="headline">Headline 2</h1>
        <h1 class="headline">Headline 3</h1>
    </div>

    <script>
        const headlines = document.querySelectorAll('.headline');

        // Highlight all headlines
        headlines.forEach(headline => {
            headline.style.color = 'red';
        });

        // Display the number of headlines
        console.log(`Number of headlines: ${headlines.length}`);
    </script>
</body>
</html>

Probier es selbst »

Dieser Code wählt alle Elemente mit der Klasse headline aus, ändert ihre Farbe auf Rot und zeigt die Anzahl dieser Elemente an.

Traversieren mit rekursiven Funktionen

Erstellen wir ein praxisnahes Beispiel für rekursives Traversieren. Wir verwenden ein verschachteltes Kommentarsystem, bei dem jeder Kommentar Antworten haben kann.

<!DOCTYPE html>
<html>
<head>
    <title>Recursive Traversal</title>
    <style>
        .comment {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .reply {
            margin-left: 20px;
            border-left: 2px solid #aaa;
        }
    </style>
</head>
<body>
    <div class="comments">
        <div class="comment">
            <p>Comment 1</p>
            <div class="reply">
                <p>Reply 1-1</p>
                <div class="reply">
                    <p>Reply 1-1-1</p>
                </div>
            </div>
            <div class="reply">
                <p>Reply 1-2</p>
            </div>
        </div>
        <div class="comment">
            <p>Comment 2</p>
            <div class="reply">
                <p>Reply 2-1</p>
            </div>
        </div>
    </div>

    <script>
        function traverseComments(node) {
            if (!node) return; // Guard against null/undefined

            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('comment')) {
                console.log(`Comment: ${node.querySelector('p').textContent}`);
            }

            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('reply')) {
                console.log(`Reply: ${node.querySelector('p').textContent}`);
            }

            for (let i = 0; i < node.childNodes.length; i++) {
                traverseComments(node.childNodes[i]);
            }
        }

        traverseComments(document.querySelector('.comments'));
    </script>
</body>
</html>

Probier es selbst »

Dieser Code stellt ein verschachteltes Kommentarsystem mit Kommentaren und Antworten dar. Die Funktion traverseComments traversiert rekursiv jeden Kommentar und jede Antwort und zeigt deren Textinhalt an. Die verschachtelte Struktur ermöglicht Antworten auf Antworten und demonstriert einen realen Anwendungsfall für rekursives Traversieren. Fügen Sie immer eine null/undefined-Prüfung am Anfang rekursiver Funktionen ein, um Fehler zu verhindern, wenn der anfängliche Selektor nichts zurückgibt.

Praktische Beispiele

Diese Beispiele kombinieren DOM-Traversal mit gängigen Manipulationstechniken, um reale Arbeitsabläufe zu demonstrieren.

Eine dynamische Aufgabenliste erstellen

Stellen Sie sich vor, Sie haben eine Aufgabenliste, in der Benutzer neue Aufgaben hinzufügen können.

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic To-Do List</title>
    <style>
        .info { color: darkgreen; }
    </style>
</head>
<body>
    <div id="todo-list">
        <h2>To-Do List</h2>
        <ul id="tasks">
            <li>Task 1</li>
            <li>Task 2</li>
        </ul>
        <input type="text" id="task-input" placeholder="Add a new task" />
        <button id="add-button">Add Task</button>
    </div>

    <script>
        const tasks = document.getElementById('tasks');
        const input = document.getElementById('task-input');
        const button = document.getElementById('add-button');

        button.addEventListener('click', () => {
            const newTask = input.value.trim();
            if (newTask) {
                const li = document.createElement('li');
                li.textContent = newTask;
                tasks.appendChild(li);
                input.value = '';
                console.log('Added new task to the to-do list');
            }
        });
    </script>
</body>
</html>

Probier es selbst »

Dieser Code ermöglicht es Benutzern, neue Aufgaben zur Aufgabenliste hinzuzufügen, indem sie Text in ein Eingabefeld eingeben und auf einen Button klicken.

Element-Attribute aktualisieren

Stellen Sie sich vor, Sie haben eine Produktliste und möchten Produkte als „Favorit" markieren, wenn sie angeklickt werden.

<!DOCTYPE html>
<html>
<head>
    <title>Updating Element Attributes</title>
    <style>
        .favorite { font-weight: bold; color: gold; }
        .info { color: darkblue; }
    </style>
</head>
<body>
<h4>Click on the list item below to see the result!</h4>
    <ul id="product-list">
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>

    <script>
        const productList = document.getElementById('product-list');

        productList.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                event.target.classList.toggle('favorite');
                console.log(`Toggled favorite status for: ${event.target.textContent}`);
            }
        });
    </script>
</body>
</html>

Probier es selbst »

Dieser Code ermöglicht es Benutzern, Produkte als „Favorit" zu markieren, indem sie darauf klicken, wodurch ihr Erscheinungsbild mithilfe einer favorite-Klasse geändert wird.

Info

Minimieren Sie DOM-Zugriffe, um die Performance zu verbessern. Bündeln Sie DOM-Manipulationen, um Reflows und Repaints zu reduzieren.

Häufige Fehlerquellen

Einige typische Fallen verursachen die meisten DOM-Traversal-Fehler:

Leerzeichen-Textknoten. firstChild, nextSibling und childNodes zählen Leerzeichen und Zeilenumbrüche zwischen Tags als Textknoten. Das erste Kindelement einer mehrzeilig geschriebenen <ul> ist normalerweise ein Textknoten und nicht das erste <li>. Verwenden Sie die reinen Elementversionen (firstElementChild, nextElementSibling, children), sofern Sie nicht explizit Textknoten benötigen.
Vergessen, dass Traversal null zurückgeben kann. parentElement, nextElementSibling und ähnliche Eigenschaften geben null an den Rändern des Baums zurück (das letzte Geschwisterelement hat kein nextElementSibling). Prüfen Sie immer, bevor Sie eine Methode auf das Ergebnis aufrufen, so wie das Geschwisterbeispiel oben es mit if (nextTask) tut.
Kollektionen wie Arrays behandeln. children, childNodes und getElementsByClassName geben Kollektionen zurück, keine echten Arrays. HTMLCollection hat kein forEach. Konvertieren Sie mit Array.from(collection) oder [...collection], wenn Sie Array-Methoden wie map oder filter benötigen. (querySelectorAll's NodeList hat forEach, aber nicht map.)
Über eine live Kollektion iterieren, während man sie ändert. Da getElementsByClassName live ist, kann das Hinzufügen oder Entfernen von passenden Elementen innerhalb einer for-Schleife über die Kollektion dazu führen, dass Elemente übersprungen werden oder die Schleife ewig läuft. Erstellen Sie zuerst eine Momentaufnahme mit Array.from(...), wenn Sie während der Iteration mutieren möchten.

Um tiefer in die Typisierung von Knoten und deren Inhalt einzutauchen, lesen Sie Knoteneigenschaften: Typ, Tag und Inhalt. Um auf Benutzeraktionen beim Traversieren zu reagieren, lesen Sie Event-Handling im DOM.

Fazit

Das Beherrschen von DOM-Traversal ist essenziell für die Erstellung dynamischer, interaktiver Webanwendungen. Durch das Verstehen und Nutzen der verschiedenen Methoden und Techniken zum Navigieren und Manipulieren des DOM können Sie Nutzererlebnisse verbessern und die Funktionalität Ihrer Webprojekte steigern.

Übung

Welche der folgenden Methoden kann verwendet werden, um das DOM in JavaScript zu traversieren?