JavaScript DOM-Knoten

DOM-Knoten verstehen

Das Document Object Model (DOM) ist ein grundlegendes Konzept der Webentwicklung und fungiert als Schnittstelle zwischen HTML-Dokumenten und JavaScript. Wenn eine Webseite geladen wird, analysiert der Browser das HTML und erstellt das DOM — einen lebendigen, im Arbeitsspeicher gehaltenen Objektbaum, den JavaScript lesen und verändern kann. Jede Änderung, die Sie am DOM vornehmen, wird sofort auf der Seite sichtbar, was interaktive Webanwendungen erst ermöglicht.

Dieser Leitfaden behandelt DOM-Knoten: was sie sind, welche verschiedenen Typen es gibt, wie man sie identifiziert und wie man sie erstellt, hinzufügt, entfernt und ersetzt. Am Ende werden Sie die Bausteine verstehen, auf denen jede übergeordnete DOM-Technik — wie das Auswählen von Elementen oder das Traversieren des Baums — aufbaut.

Was ist ein DOM-Knoten?

Ein Knoten ist die grundlegendste Einheit des DOM-Baums. Alles in einem Dokument — Elemente, der darin enthaltene Text, Attribute und sogar Kommentare — wird als Knoten dargestellt. Jeder Knoten ist ein Objekt, das von der eingebauten Node-Klasse erbt, sodass alle Knoten einen gemeinsamen Satz von Eigenschaften (nodeType, nodeName, parentNode, childNodes usw.) für Navigation und Manipulation teilen.

Eine hilfreiche Vorstellung: Das HTML, das Sie schreiben, ist das Rezept, und das DOM ist das lebendige Objekt, das der Browser aus diesem Rezept kocht. Sobald die Seite geladen ist, bearbeiten Sie nicht mehr den HTML-Text — Sie bearbeiten die Knoten.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Nodes Example</title>
</head>
<body>
    <div id="example">
        <!-- This is a comment node -->
        <p>This is a text node within an element node.</p>
    </div>
    <script>
        let exampleDiv = document.getElementById('example');
        exampleDiv.style.border = '2px solid blue'; // Highlight the div element
        exampleDiv.style.padding = '10px';
    </script>
</body>
</html>

Probier es selbst »

Erläuterung: In diesem Beispiel greifen wir auf das div mit der ID example zu und wenden CSS-Stile an, um es visuell hervorzuheben. Dies zeigt, wie man die Stileigenschaften eines Element-Knotens direkt manipuliert und ihn auf der Seite auffälliger macht.

Die verschiedenen Typen von DOM-Knoten

Jeder Knoten hat eine numerische nodeType-Eigenschaft, die angibt, um welche Art von Knoten es sich handelt. Die häufigsten Typen, mit denen Sie arbeiten werden, sind:

`nodeType`	Konstante	Bedeutung
`1`	`Node.ELEMENT_NODE`	Ein HTML-Element wie `<div>` oder `<p>`
`3`	`Node.TEXT_NODE`	Der Text innerhalb eines Elements (einschließlich Leerzeichen)
`8`	`Node.COMMENT_NODE`	Ein HTML-Kommentar (`<!-- ... -->`)
`9`	`Node.DOCUMENT_NODE`	Das `document`-Objekt selbst, die Baumwurzel

Eine häufige Überraschung für Einsteiger: Leerzeichen zählen als Textknoten. Die Zeilenumbrüche und Einrückungen zwischen Ihren Tags erzeugen leere Textknoten, weshalb childNodes oft mehr Elemente zurückgibt als erwartet. (Wenn Sie nur Element-Kinder möchten und diese Leerzeichen-Textknoten überspringen wollen, verwenden Sie children statt childNodes.) Attribute sind ebenfalls Knoten, aber moderner Code liest sie mit getAttribute() / setAttribute() statt direkt über Attributknoten zu navigieren.

Das folgende Beispiel durchläuft die untergeordneten Knoten eines <div> und gibt den Typ jedes Knotens aus:

<!DOCTYPE html>
<html>
<head>
    <title>Node Types Interactive Example</title>
    <style>
        #info {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 10px;
        }
        button {
            cursor: pointer;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="info">
        <!-- This is a comment node -->
        <p>Element node with a <span>child element node</span> and some text.</p>
    </div>
    <button onclick="displayNodeTypes()">Show Node Types</button>
    <div id="output">Node types will be displayed here.</div>
    <script>
        function displayNodeTypes() {
            const infoDiv = document.getElementById('info');
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';  // Clear previous output
            const nodeTypes = [];

            // Iterate over all child nodes of the div
            infoDiv.childNodes.forEach(node => {
                let typeDescription = '';
                switch(node.nodeType) {
                    case Node.ELEMENT_NODE:
                        typeDescription = 'Element node: ' + node.tagName;
                        break;
                    case Node.TEXT_NODE:
                        // Trim text content and check if it's not empty
                        let textContent = node.textContent.trim();
                        if (textContent) {
                            typeDescription = 'Text node: "' + textContent + '"';
                        }
                        break;
                    case Node.COMMENT_NODE:
                        typeDescription = 'Comment node: "' + node.textContent.trim() + '"';
                        break;
                }

                // Only add non-empty descriptions
                if (typeDescription) {
                    nodeTypes.push(typeDescription);
                    const p = document.createElement('p');
                    p.textContent = typeDescription;
                    outputDiv.appendChild(p);
                }
            });

            // If no nodes are visible or found
            if (nodeTypes.length === 0) {
                outputDiv.textContent = 'No visible nodes found.';
            }
        }
    </script>
</body>
</html>

Probier es selbst »

Das HTML-Dokument zeigt, wie verschiedene Typen von DOM-Knoten (wie Element-, Text- und Kommentarknoten) identifiziert und angezeigt werden können. Es enthält einen formatierten Bereich zur Darstellung dieser Knoten, einen Button, der eine JavaScript-Funktion auslöst, um diese Knoten zu analysieren und aufzulisten, sowie einen Bereich zur Anzeige der Ergebnisse. Die JavaScript-Funktion untersucht jeden Knoten in einem bestimmten Teil des Dokuments, kategorisiert ihn und gibt seinen Typ und seine Details aus.

DOM-Knoten manipulieren

Interaktive Seiten werden erstellt, indem Knoten nach dem Laden der Seite verändert werden. Die vier Operationen, die Sie am häufigsten benötigen, sind Erstellen, Hinzufügen, Entfernen und Ersetzen von Knoten. Für einen umfassenderen Überblick über die darauf aufbauenden Techniken, siehe DOM-Manipulation.

Knoten erstellen und hinzufügen

Das Erstellen und Hinzufügen eines Knotens sind zwei separate Schritte. document.createElement() erzeugt einen losgelösten Knoten, der sich noch nicht auf der Seite befindet; appendChild() (oder append(), prepend(), insertBefore()) ist das, was ihn tatsächlich in den Baum einfügt:

<!DOCTYPE html>
<html>
<head>
    <title>Add Node Example</title>
</head>
<body>
    <button onclick="addNewParagraph()">Add Paragraph</button>
    <script>
        function addNewParagraph() {
            let newNode = document.createElement('p');
            newNode.textContent = 'This is a new paragraph.';
            document.body.appendChild(newNode);
        }
    </script>
</body>
</html>

Probier es selbst »

Erläuterung: Dieses Beispiel enthält einen Button, der beim Klicken eine Funktion auslöst, die ein neues Absatzelement (<p>) erstellt und es an den Body des Dokuments anhängt. Es zeigt, wie JavaScript verwendet werden kann, um Inhalte dynamisch zu einer Seite hinzuzufügen, was besonders nützlich für Anwendungen ist, die in Echtzeit aktualisiert werden müssen, ohne die Seite neu zu laden.

Knoten entfernen

Um einen Knoten von der Seite zu entfernen, rufen Sie removeChild() auf seinem übergeordneten Element auf, oder — einfacher in modernen Browsern — rufen Sie node.remove() direkt auf dem Knoten selbst auf. Das Beispiel verwendet removeChild(), damit Sie die Eltern-Kind-Beziehung explizit sehen können:

<!DOCTYPE html>
<html>
<head>
    <title>Remove Node Example</title>
</head>
<body>
    <div id="container">
        <p id="toBeRemoved">This paragraph will be removed. <button onclick="removeParagraph()">Remove</button></p>
    </div>
    <script>
        function removeParagraph() {
            let parentNode = document.getElementById('container');
            let childNode = document.getElementById('toBeRemoved');
            parentNode.removeChild(childNode);
        }
    </script>
</body>
</html>

Probier es selbst »

Erläuterung: Dieses Skript demonstriert praktisch, wie ein DOM-Element mithilfe eines im Absatz selbst eingebetteten Buttons entfernt wird. Die Methode removeChild() wird verwendet, um das angegebene Element zu entfernen, und veranschaulicht eine dynamische, vom Benutzer initiierte Aktion, die die Dokumentstruktur direkt verändert.

Knoten ersetzen

replaceChild(newNode, oldNode) tauscht einen Knoten in einem einzigen Schritt gegen einen anderen aus und behält dabei die Position des alten Knotens im Baum bei:

<!DOCTYPE html>
<html>
<head>
    <title>Replace Node Example</title>
</head>
<body>
    <div id="oldElement">This element will be replaced. <button onclick="replaceElement()">Replace</button></div>
    <script>
        function replaceElement() {
            let newNode = document.createElement('div');
            newNode.textContent = 'This is a replacement.';
            let oldNode = document.getElementById('oldElement');
            oldNode.parentNode.replaceChild(newNode, oldNode);
        }
    </script>
</body>
</html>

Probier es selbst »

Erläuterung: In diesem interaktiven Beispiel löst ein Button das Ersetzen eines vorhandenen div durch ein neu erstelltes div aus. Dies veranschaulicht die Methode replaceChild(), die besonders nützlich ist, wenn ein Element basierend auf Benutzeraktionen oder externen Ereignissen aktualisiert werden muss, beispielsweise beim Empfang neuer Daten von einem Server.

Best Practices und Tipps

DOM-Manipulationen minimieren: Jede Änderung kann den Browser dazu veranlassen, das Layout neu zu berechnen (Reflow) und die Seite neu zu zeichnen (Repaint). Bündeln Sie Ihre Änderungen, anstatt das DOM in einer engen Schleife zu berühren.
Erst lesen, dann schreiben: Das Mischen von Lesevorgängen (wie offsetHeight) und Schreibvorgängen innerhalb einer Schleife erzwingt wiederholtes Layout-Thrashing. Gruppieren Sie alle Lesevorgänge zusammen und alle Schreibvorgänge zusammen.
Off-Screen aufbauen, einmal einfügen: Verwenden Sie ein DocumentFragment (unten gezeigt), um viele Elemente zusammenzustellen, bevor Sie sie in einer einzigen Operation einfügen.
Selektionen zwischenspeichern: Speichern Sie die Ergebnisse von getElementById/querySelector in einer Variablen, anstatt dasselbe Element wiederholt abzufragen. Siehe DOM-Leistungsoptimierung für mehr.

Info

Stellen Sie bei DOM-Manipulationen immer die browserübergreifende Kompatibilität sicher. Das Testen in verschiedenen Browsern hilft, unerwartetes Verhalten zu verhindern und eine konsistente Benutzererfahrung zu gewährleisten.

DocumentFragment-Beispiel

Ein DocumentFragment ist ein leichter, off-screen-Container für Knoten. Da er nicht Teil des aktiven Dokuments ist, verursacht das Anhängen von Knoten daran keinen Layout-Aufwand — der Browser führt den Reflow nur einmal durch, wenn Sie das gesamte Fragment in die Seite einfügen. Dies macht es ideal für das gleichzeitige Hinzufügen vieler Elemente:

<!DOCTYPE html>
<html>
<head>
    <title>DocumentFragment Example</title>
</head>
<body>
    <div id="list-container">
        <h2>Item List</h2>
        <ul id="item-list">
            <!-- Items will be added here -->
        </ul>
        <button id="add-items">Add 100 Items</button>
    </div>

    <script>
        const itemList = document.getElementById('item-list');
        const addItemsButton = document.getElementById('add-items');

        addItemsButton.addEventListener('click', () => {
            // Create a DocumentFragment
            const fragment = document.createDocumentFragment();

            // Add 100 list items to the fragment
            for (let i = 1; i <= 100; i++) {
                const listItem = document.createElement('li');
                listItem.textContent = `Item ${i}`;
                fragment.appendChild(listItem);
            }

            // Append the fragment to the item list
            itemList.appendChild(fragment);
        });
    </script>
</body>
</html>

Probier es selbst »

Wir beginnen damit, das <ul>-Element auszuwählen, dem die neuen Elemente hinzugefügt werden, sowie den Button, der das Hinzufügen auslöst.
Wenn der Button "Add 100 Items" geklickt wird, erstellen wir ein DocumentFragment-Objekt.
Anschließend erstellen wir in einer Schleife 100 <li>-Elemente, setzen ihren Textinhalt und hängen jedes an das DocumentFragment an.
Abschließend hängen wir das DocumentFragment an das <ul>-Element an. Da das Fragment während der Aufbauphase nicht Teil des aktiven DOM ist, minimiert dieser Ansatz Reflows und Repaints und verbessert die Leistung.

Die Verwendung von DocumentFragment ist besonders nützlich, wenn Sie viele Elemente gleichzeitig zum DOM hinzufügen müssen, da sie den Overhead durch mehrfache Reflows und Repaints reduziert und zu reibungsloseren und schnelleren Aktualisierungen führt.

DOM-Knoten vs. DOM-Bäume

DOM-Knoten und DOM-Bäume sind verwandte Konzepte, beziehen sich aber auf unterschiedliche Aspekte der Struktur und Manipulation eines Webdokuments:

DOM-Knoten: Ein DOM-Knoten ist ein einzelner Bestandteil innerhalb des Document Object Model (DOM). Jedes Element, jeder Text, jeder Kommentar und jedes Attribut in einem HTML- oder XML-Dokument gilt als Knoten. Knoten sind die grundlegenden Bausteine eines Dokuments. Zum Beispiel sind ein <h1>-Tag, der Text innerhalb dieses Tags und sogar die Attribute dieses Tags (wie class="title") allesamt separate Knoten.
DOM-Baum: Der DOM-Baum bezeichnet die gesamte Struktur oder Hierarchie der Knoten, wie sie im Dokument angeordnet sind. Er ist eine baumartige Darstellung, die zeigt, wie alle Knoten in einem Dokument miteinander in Beziehung stehen. Knoten in diesem Baum haben Eltern-Kind-Beziehungen, ähnlich wie Ordner und Dateien auf Ihrem Computer. In einem HTML-Dokument könnte beispielsweise der <body>-Knoten ein übergeordneter Knoten sein, mit mehreren untergeordneten Knoten wie <div>, <p> und <img>, die verschiedene Teile der Webseite darstellen.

Einfach ausgedrückt: Ein DOM-Knoten ist ein einzelner Punkt oder ein Teil eines größeren Puzzles, während der DOM-Baum das vollständige Puzzle oder die Gesamtheit der Beziehungen zwischen diesen Punkten darstellt. Der DOM-Baum ist nützlich für das Navigieren und Manipulieren der Dokumentstruktur über Programmiersprachen wie JavaScript, da er Entwicklern ermöglicht, Elemente innerhalb der verschachtelten Hierarchie effizient zu finden (auszuwählen), zu ändern oder zu aktualisieren.

Fazit

Knoten sind die Atome des DOM. Sobald Sie die verschiedenen Knotentypen erkennen, den nodeType eines Knotens lesen und Knoten sicher erstellen, hinzufügen, entfernen und ersetzen können, wird jede übergeordnete DOM-Aufgabe zugänglich. Behalten Sie die Leistung im Blick — bündeln Sie Ihre Änderungen und greifen Sie auf ein DocumentFragment zurück, wenn Sie viele Elemente gleichzeitig einfügen.

Was als nächstes lesen

Knoteneigenschaften: Typ, Tag und Inhalt — vertiefen Sie nodeType, nodeName, textContent und Ähnliches.
DOM-Elemente auswählen — finden Sie die Knoten, mit denen Sie arbeiten möchten.
Das DOM traversieren — bewegen Sie sich zwischen übergeordneten, untergeordneten und gleichrangigen Knoten.
DOM-Manipulation — ein umfangreicheres Toolkit, das auf den hier behandelten Operationen aufbaut.

Übung

Welche der folgenden sind Typen von DOM-Knoten in einem Webdokument?