Pourquoi Manipulation du DOM ?
La manipulation du Document Object Model (DOM) est une compétence essentielle pour tout développeur web, quel que soit son niveau d'expertise. En effet, en tant qu'engin dynamique et interactif, un site Web n'est pas seulement une collection de fichiers statiques ; il est en réalité un arbre complexe de nœuds HTML qui sont interagis avec JavaScript pour créer des expériences utilisateur fluides et réactives.
Un cas d'utilisation concret serait la mise à jour dynamique du contenu d'une page sans avoir besoin de recharger entièrement la page. Par exemple, en cliquant sur un bouton, une liste peut être filtrée ou ajoutée en fonction des critères spécifiés par l'utilisateur.
Prerequis
Pour suivre ce tutoriel, vous aurez besoin des connaissances suivantes :
- Comprendre le langage HTML et ses bases
- Connaître les concepts de base du JavaScript (variables, fonctions, structures de contrôle)
- Avoir un éditeur de code texte comme VSCode ou Sublime Text
Outils à installer :
- Un navigateur Web récent (Chrome, Firefox, Edge)
- Node.js pour exécuter des scripts JavaScript côté serveur (version 14.0 ou supérieure)
- Un outil de gestion de package comme npm (installé avec Node.js)
Concepts fondamentaux
Sélectionner des éléments du DOM
Pour manipuler le DOM, il faut d'abord sélectionner les éléments HTML que nous voulons modifier. C'est ce qu'on appelle la sélection des éléments.
// Sélectionne un élément par son ID
const elementById = document.getElementById('monElement');
// Sélectionne tous les éléments de classe 'mesElements'
const elementsByClass = document.getElementsByClassName('mesElements');
// Sélectionne tous les éléments qui correspondent au sélecteur CSS
const elementsBySelector = document.querySelectorAll('.mesElements');
Modifier le contenu du DOM
Une fois qu'un élément est sélectionné, on peut modifier son contenu.
// Modifie le texte interne d'un élément
elementById.textContent = 'Nouveau texte';
// Ajoute un attribut à un élément
elementById.setAttribute('data-id', '123');
// Supprime un attribut de l'élément
elementById.removeAttribute('data-id');
Manipuler les styles CSS
On peut aussi modifier le style d'un élément en utilisant JavaScript.
// Change la couleur de fond d'un élément
elementById.style.backgroundColor = 'red';
// Ajoute une classe à un élément
elementById.classList.add('maClasse');
// Supprime une classe de l'élément
elementById.classList.remove('maClasse');
Mise en pratique : projet fil rouge
Nous allons construire un simple gestionnaire de tâches. Ce projet comprendra :
- Afficher la liste des tâches.
- Ajouter de nouvelles tâches via un formulaire.
- Supprimer une tâche existante.
Étape 1 : Structure du projet
Créez un nouveau dossier appelé todo-list et initialisez un projet Node.js avec npm :
mkdir todo-list
cd todo-list
npm init -y
Ajoutez les fichiers suivants :
index.htmlstyles.cssscript.js
Étape 2 : Structure HTML
Dans index.html, structurez la page de base avec un formulaire pour ajouter des tâches et une liste pour afficher les tâches.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestionnaire de Tâches</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Gestionnaire de Tâches</h1>
<form id="taskForm">
<input type="text" id="newTask" placeholder="Nouvelle tâche...">
<button type="submit">Ajouter</button>
</form>
<script src="script.js"></script>
</body>
</html>
Étape 3 : Style CSS
Ajoutez quelques styles de base dans styles.css pour rendre la page plus jolie.
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
input[type="text"] {
padding: 8px;
margin-right: 10px;
}
button {
padding: 8px 16px;
}
Étape 4 : Script JavaScript
Maintenant, implémentons la logique de gestion des tâches dans script.js.
document.addEventListener('DOMContentLoaded', () => {
const taskForm = document.getElementById('taskForm');
const tasksList = document.getElementById('tasksList');
taskForm.addEventListener('submit', (event) => {
event.preventDefault();
addTask();
});
function addTask() {
const newTaskInput = document.getElementById('newTask');
const taskText = newTaskInput.value.trim();
if (taskText === '') return;
// Crée un nouvel élément li pour la tâche
const li = document.createElement('li');
li.textContent = taskText;
li.classList.add('task-item');
// Ajoute un bouton de suppression
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Supprimer';
deleteButton.addEventListener('click', () => {
tasksList.removeChild(li);
});
li.appendChild(deleteButton);
// Ajoute la tâche à la liste
tasksList.appendChild(li);
// Réinitialise le champ de saisie
newTaskInput.value = '';
}
});
Étape 5 : Exécution du projet
Pour exécuter ce projet, vous pouvez simplement ouvrir index.html dans votre navigateur Web.
open index.html # Sur Mac
start index.html # Sur Windows
xdg-open index.html # Sur Linux
Erreurs frequentes et debugging
1. Erreur : Cannot read property 'appendChild' of null
const tasksList = document.getElementById('tasksList');
tasksList.appendChild(newLi); // Si tasksList est null, cette erreur se produit
##
if (tasksList) {
tasksList.appendChild(newLi);
} else {
console.error('Element #tasksList non trouvé');
}
2. Erreur : Uncaught TypeError: Cannot read property 'addEventListener' of null
document.getElementById('taskForm').addEventListener('submit', (event) => {
event.preventDefault();
});
##
const taskForm = document.getElementById('taskForm');
if (taskForm) {
taskForm.addEventListener('submit', (event) => {
event.preventDefault();
});
} else {
console.error('Element #taskForm non trouvé');
}
3. Erreur : Cannot read property 'textContent' of null
const newTaskInput = document.getElementById('newTask');
if (newTaskInput.value === '') return;
##
const newTaskInput = document.getElementById('newTask');
if (!newTaskInput || newTaskInput.value.trim() === '') return;
Pour aller plus loin
Manipuler les attributs de données (
data-*) : Apprenez à utiliser l'APIdatasetpour manipuler facilement les attributs de données personnalisés.Utiliser des bibliothèques comme jQuery : Si vous trouvez le DOM difficile à gérer, apprenez à utiliser une bibliothèque comme jQuery pour simplifier les tâches de manipulation du DOM.
Créer des composants réactifs avec React : Pour des applications plus complexes et réactives, apprenez à créer des composants réactifs avec React.
Défi pratique : Créez une simple application de chat en utilisant le DOM pour afficher des messages et permettre aux utilisateurs d'envoyer de nouveaux messages.