W3Docs

Apparence

Français

Manipulation du DOM en JavaScript ​

La manipulation du DOM (Document Object Model) en JavaScript est une compétence fondamentale pour les développeurs web. Elle nous permet de modifier dynamiquement le contenu et la structure d'une page web. Dans ce guide complet, nous explorerons diverses techniques et méthodes pour manipuler le DOM à l'aide de JavaScript. Que vous soyez débutant ou développeur expérimenté, ce guide vous fournira des informations précieuses et des exemples pour améliorer vos compétences.

Modifier le contenu et les attributs des éléments ​

La manipulation du contenu et des attributs des éléments du DOM est un aspect crucial du développement web dynamique. En modifiant le contenu, nous pouvons mettre à jour le texte ou le HTML à l'intérieur d'un élément. En modifiant les attributs, nous pouvons changer des propriétés comme class, id ou src. JavaScript fournit des méthodes puissantes pour accomplir ces tâches, nous permettant de créer des applications web réactives et interactives. Explorons comment utiliser efficacement innerHTML, textContent, setAttribute et getAttribute.

Modifier le contenu des éléments ​

Nous pouvons modifier le contenu d'un élément à l'aide des propriétés innerHTML ou textContent.

innerHTML vs textContent ​

innerHTML nous permet de définir ou d'obtenir le contenu HTML d'un élément, y compris toutes les balises HTML.

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 »

Explication :

  • innerHTML nous permet de définir ou d'obtenir le contenu HTML d'un élément, y compris toutes les balises HTML. Dans l'exemple, cliquer sur le bouton « Modifier avec innerHTML » remplacera le contenu du paragraphe par un nouveau contenu incluant des balises HTML, ce qui modifie l'apparence du texte.
  • textContent définit ou obtient le contenu textuel d'un élément sans analyser les balises HTML. Cliquer sur le bouton « Modifier avec textContent » remplacera le contenu du paragraphe par du texte brut, en ignorant toute balise HTML.

INFO

Utilisez textContent lors de l'insertion de contenu généré par les utilisateurs pour éviter les risques de sécurité tels que les XSS (Cross-Site Scripting).

Modifier les attributs des éléments ​

Nous pouvons modifier les attributs d'un élément à l'aide de la méthode setAttribute et les récupérer à l'aide de la méthode getAttribute. Ces méthodes sont utiles pour modifier dynamiquement les éléments en fonction des interactions utilisateur ou d'autres événements.

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 »

Explication :

  • setAttribute('attributeName', 'value') : Cette méthode nous permet de définir une nouvelle valeur pour un attribut spécifié d'un élément. Dans l'exemple, cliquer sur le bouton « Modifier l'attribut » change l'attribut class de la <div> de « initial-class » à « new-class ».
  • getAttribute('attributeName') : Cette méthode récupère la valeur actuelle de l'attribut spécifié. Cliquer sur le bouton « Obtenir l'attribut » affiche une alerte avec la valeur actuelle de l'attribut class de la <div>.

INFO

Utilisez toujours setAttribute et getAttribute pour les attributs personnalisés et les attributs générés dynamiquement. Pour la manipulation des classes, envisagez d'utiliser classList.add(), classList.remove() et classList.toggle() pour une syntaxe plus propre et plus sûre.

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

Ajouter et supprimer des éléments ​

Nous pouvons ajouter de nouveaux éléments au DOM ou supprimer des éléments existants.

Ajouter des éléments ​

Pour ajouter de nouveaux éléments au DOM, nous les créons d'abord à l'aide de la méthode createElement, puis nous les ajoutons à un élément existant avec appendChild ou nous les insérons à une position spécifique avec insertBefore.

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 »

Explication :

  • createElement('tagName') : Cette méthode crée un nouvel élément spécifié par tagName. Par exemple, document.createElement('li') crée un nouvel élément <li>.
  • appendChild(newElement) : Cette méthode ajoute un nouvel élément enfant à un élément parent spécifié. Dans l'exemple, cliquer sur le bouton « Ajouter une tâche » crée un nouvel élément de liste (<li>) et l'ajoute à la liste des tâches (<ul>).
  • insertBefore(newElement, referenceElement) : Cette méthode insère un nouvel élément avant un élément de référence spécifié au sein du même parent. Cliquer sur le bouton « Insérer avant la première tâche » crée un nouvel élément de liste (<li>) et l'insère avant la première tâche de la liste.

note

Pour insérer directement des chaînes HTML, envisagez insertAdjacentHTML(). Pour remplacer un élément existant, element.replaceWith(newElement) est une alternative moderne à la combinaison de remove() et appendChild().

Supprimer des éléments ​

Pour supprimer un élément, nous pouvons utiliser la méthode moderne element.remove().

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 »

Explication :

  • element.remove() : Cette méthode moderne supprime directement un élément spécifié du DOM. Dans l'exemple, cliquer sur le bouton « Supprimer le paragraphe » retire l'élément <p> de la page.

INFO

L'utilisation de element.remove() est l'approche recommandée pour les modifications dynamiques de contenu, comme la suppression d'articles dans un panier d'achat, car elle offre une syntaxe plus propre que l'ancienne méthode removeChild.

Exemple : Liste de tâches dynamique ​

Créons une application simple de liste de tâches pour illustrer les concepts ci-dessus.

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 »

Explication :

  • createElement crée un nouvel élément de liste pour la tâche.
  • appendChild ajoute la nouvelle tâche à la liste des tâches.
  • element.remove() supprime une tâche de la liste des tâches lors d'un clic.

note

(Remarque : la logique d'ajout de tâches suit le même modèle démontré dans la section Ajouter des éléments.)

INFO

Lors de la manipulation de grands ensembles de données, envisagez d'utiliser des bibliothèques de DOM virtuel telles que React pour optimiser les performances et gérer les mises à jour plus efficacement.

Conclusion ​

Maîtriser la manipulation du DOM est essentiel pour créer des applications web dynamiques et interactives. En comprenant et en utilisant des méthodes pour modifier le contenu et les attributs, ainsi que pour ajouter ou supprimer des éléments, nous pouvons concevoir des interfaces utilisateur réactives qui améliorent l'expérience utilisateur. Affiner continuellement ces techniques garantira un développement web de haute qualité et performant.

Pratique ​

Parmi les méthodes suivantes, laquelle peut être utilisée pour modifier le contenu d'un élément DOM ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.