Les nœuds du DOM en JavaScript

Comprendre les nœuds du DOM

Le Document Object Model (DOM) est un concept fondamental du développement web, servant d'interface entre les documents HTML et JavaScript. Lorsqu'une page web se charge, le navigateur analyse le HTML et construit le DOM — un arbre d'objets vivant en mémoire que JavaScript peut lire et modifier. Chaque modification apportée au DOM se reflète instantanément sur la page, ce qui rend possibles les applications web interactives.

Ce guide traite des nœuds du DOM : ce qu'ils sont, les différents types que vous rencontrerez, comment les identifier, et comment les créer, les ajouter, les supprimer et les remplacer. À la fin, vous comprendrez les briques de base sur lesquelles repose chaque technique DOM de haut niveau — comme la sélection d'éléments ou le parcours de l'arbre.

Qu'est-ce qu'un nœud du DOM ?

Un nœud est l'unité la plus élémentaire de l'arbre du DOM. Tout ce qui se trouve dans un document — les éléments, le texte qu'ils contiennent, les attributs et même les commentaires — est représenté sous forme de nœud. Chaque nœud est un object qui hérite de la classe intégrée Node, ils partagent donc tous un ensemble commun de propriétés (nodeType, nodeName, parentNode, childNodes, etc.) utilisées pour la navigation et la manipulation.

Une façon utile de l'imaginer : le HTML que vous écrivez est la recette, et le DOM est l'objet vivant que le navigateur prépare à partir de cette recette. Une fois la page chargée, vous ne modifiez plus le texte HTML — vous modifiez les nœuds.

<!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>

Essayez vous-même »

Explication : Dans cet exemple, nous accédons à la div avec l'ID example et lui appliquons des styles CSS pour la distinguer visuellement. Cela montre comment manipuler directement les propriétés de style d'un nœud élément, le rendant ainsi plus visible sur la page.

Les différents types de nœuds du DOM

Chaque nœud possède une propriété numérique nodeType qui indique de quel type de nœud il s'agit. Les types les plus courants que vous utiliserez sont :

`nodeType`	Constante	Signification
`1`	`Node.ELEMENT_NODE`	Un élément HTML tel que `<div>` ou `<p>`
`3`	`Node.TEXT_NODE`	Le texte à l'intérieur d'un élément (y compris les espaces)
`8`	`Node.COMMENT_NODE`	Un commentaire HTML (`<!-- ... -->`)
`9`	`Node.DOCUMENT_NODE`	L'object `document` lui-même, la racine de l'arbre

Une surprise courante pour les débutants : les espaces comptent comme des nœuds texte. Les sauts de ligne et l'indentation entre vos balises créent des nœuds texte vides, ce qui explique pourquoi childNodes renvoie souvent plus d'éléments que prévu. (Si vous souhaitez uniquement les enfants éléments et ignorer ces nœuds texte d'espacement, utilisez children à la place de childNodes.) Les attributs sont également des nœuds, mais le code moderne les lit avec getAttribute() / setAttribute() plutôt qu'en parcourant directement les nœuds d'attributs.

L'exemple ci-dessous parcourt les nœuds enfants d'une <div> et indique le type de chacun :

<!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>

Essayez vous-même »

Ce document HTML montre comment identifier et afficher différents types de nœuds du DOM (comme les nœuds élément, texte et commentaire). Il comprend une section stylisée pour afficher ces nœuds, un bouton qui déclenche une fonction JavaScript pour analyser et lister ces nœuds, ainsi qu'une zone pour afficher les résultats. La fonction JavaScript inspecte chaque nœud dans une partie désignée du document, le catégorise et affiche son type et ses détails.

Manipuler les nœuds du DOM

Les pages interactives sont construites en modifiant les nœuds après le chargement de la page. Les quatre opérations que vous utiliserez le plus souvent sont la création, l'ajout, la suppression et le remplacement de nœuds. Pour un tour d'horizon plus complet des techniques construites sur ces opérations, consultez la manipulation du DOM.

Créer et ajouter des nœuds

Créer un nœud et l'ajouter sont deux étapes distinctes. document.createElement() crée un nœud détaché qui n'est pas encore sur la page ; appendChild() (ou append(), prepend(), insertBefore()) est ce qui l'insère réellement dans l'arbre :

<!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>

Essayez vous-même »

Explication : Cet exemple comprend un bouton qui, lorsqu'il est cliqué, déclenche une fonction pour créer un nouvel élément paragraphe (<p>) et l'ajoute au corps du document. Il illustre comment JavaScript peut être utilisé pour ajouter dynamiquement du contenu à une page, ce qui est particulièrement utile pour les applications qui doivent se mettre à jour en temps réel sans recharger la page.

Supprimer des nœuds

Pour retirer un nœud de la page, appelez removeChild() sur son parent, ou — plus simplement dans les navigateurs modernes — appelez node.remove() directement sur le nœud lui-même. L'exemple utilise removeChild() afin que vous puissiez voir explicitement la relation parent/enfant :

<!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>

Essayez vous-même »

Explication : Ce script fournit une démonstration pratique de la suppression d'un élément du DOM à l'aide d'un bouton intégré dans le paragraphe lui-même. La méthode removeChild() est utilisée pour supprimer l'élément spécifié, illustrant une action dynamique initiée par l'utilisateur qui modifie directement la structure du document.

Remplacer des nœuds

replaceChild(newNode, oldNode) substitue un nœud à un autre en une seule étape, en préservant la position de l'ancien nœud dans l'arbre :

<!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>

Essayez vous-même »

Explication : Dans cet exemple interactif, un bouton déclenche le remplacement d'une div existante par une div nouvellement créée. Cela illustre la méthode replaceChild(), particulièrement utile dans les situations où un élément doit être mis à jour en fonction des actions de l'utilisateur ou d'événements externes, comme la réception de nouvelles données en provenance d'un serveur.

Bonnes pratiques et conseils

Minimisez les manipulations du DOM : chaque modification peut amener le navigateur à recalculer la mise en page (un reflow) et à redessiner la page (un repaint). Regroupez vos modifications au lieu de toucher au DOM dans une boucle serrée.
Lire, puis écrire : mélanger les lectures (comme offsetHeight) et les écritures dans une boucle force des layout thrashing répétés. Regroupez toutes vos lectures ensemble et toutes vos écritures ensemble.
Construire hors écran, insérer une seule fois : utilisez un DocumentFragment (illustré ci-dessous) pour assembler de nombreux éléments avant de les insérer en une seule opération.
Mettez en cache vos sélections : stockez les résultats de getElementById/querySelector dans une variable plutôt que d'interroger à nouveau le même élément de manière répétée. Consultez l'optimisation des performances du DOM pour en savoir plus.

Info

Veillez toujours à assurer la compatibilité entre navigateurs lorsque vous effectuez des manipulations du DOM. Tester sur différents navigateurs permet d'éviter les comportements inattendus et garantit une expérience utilisateur cohérente.

Exemple avec DocumentFragment

Un DocumentFragment est un conteneur léger hors écran pour les nœuds. Comme il ne fait pas partie du document actif, l'ajout de nœuds à ce conteneur ne coûte rien en termes de mise en page — le navigateur ne recalcule la mise en page qu'une seule fois, lorsque vous insérez l'ensemble du fragment dans la page. Cela le rend idéal pour ajouter de nombreux éléments à la fois :

<!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>

Essayez vous-même »

Nous commençons par sélectionner l'élément <ul> où les nouveaux éléments seront ajoutés et le bouton qui déclenchera l'ajout.
Lorsque le bouton « Add 100 Items » est cliqué, nous créons un object DocumentFragment.
Nous créons ensuite 100 éléments <li> dans une boucle, définissons leur contenu textuel et ajoutons chacun au DocumentFragment.
Enfin, nous ajoutons le DocumentFragment à l'élément <ul>. Comme le fragment ne fait pas partie du DOM actif pendant la phase de construction, cette approche minimise les reflows et les repaints, améliorant ainsi les performances.

L'utilisation de DocumentFragment est particulièrement utile lorsque vous devez ajouter un grand nombre d'éléments au DOM en une seule fois, car elle réduit la charge associée à de multiples reflows et repaints, ce qui conduit à des mises à jour plus fluides et plus rapides.

Nœuds du DOM et arbres du DOM

Les nœuds du DOM et les arbres du DOM sont des concepts liés, mais ils se réfèrent à des aspects différents de la façon dont un document web est structuré et manipulé :

Nœuds du DOM : un nœud du DOM est un composant individuel au sein du Document Object Model (DOM). Chaque élément, texte, commentaire et attribut dans un document HTML ou XML est considéré comme un nœud. Les nœuds sont les briques fondamentales d'un document. Par exemple, une balise <h1>, le texte à l'intérieur de cette balise, et même les attributs de cette balise (comme class="title") sont tous des nœuds distincts.
Arbre du DOM : l'arbre du DOM désigne la structure ou hiérarchie complète des nœuds tels qu'ils sont organisés dans le document. Il s'agit d'une représentation arborescente qui montre comment tous les nœuds d'un document sont liés les uns aux autres. Les nœuds de cet arbre ont des relations parent-enfant, tout comme des dossiers et des fichiers sur votre ordinateur. Par exemple, dans un document HTML, le nœud <body> peut être un nœud parent, avec plusieurs nœuds enfants comme <div>, <p> et <img> qui représentent différentes parties de la page web.

En termes simples, vous pouvez considérer un nœud du DOM comme un point unique ou une pièce d'un puzzle plus grand, tandis que l'arbre du DOM représente le puzzle complet ou l'ensemble des relations entre ces points. L'arbre du DOM est utile pour naviguer et manipuler la structure d'un document via des langages de programmation comme JavaScript, car il permet aux développeurs de trouver (sélectionner), modifier ou mettre à jour efficacement des éléments au sein de la hiérarchie imbriquée.

Conclusion

Les nœuds sont les atomes du DOM. Une fois que vous pouvez reconnaître les différents types de nœuds, lire le nodeType d'un nœud, et créer, ajouter, supprimer et remplacer des nœuds avec assurance, chaque tâche DOM de niveau supérieur devient accessible. Gardez les performances à l'esprit — regroupez vos modifications et utilisez un DocumentFragment lorsque vous insérez de nombreux éléments à la fois.

Pratique

Lesquels des éléments suivants sont des types de nœuds du DOM dans un document web ?

Comprendre les nœuds du DOM

Qu'est-ce qu'un nœud du DOM ?

Les différents types de nœuds du DOM

Manipuler les nœuds du DOM

Créer et ajouter des nœuds

Supprimer des nœuds

Remplacer des nœuds

Bonnes pratiques et conseils

Exemple avec DocumentFragment

Nœuds du DOM et arbres du DOM

Conclusion

À lire ensuite

Pratique