Ces sites web qui s’animent sous vos clics, qui affichent des infos fraîches sans recharger la page, ou qui changent d’allure comme par enchantement… fascinant, n’est-ce pas ? Derrière cette interactivité se cache bien souvent la puissance de JavaScript et sa capacité à manipuler le DOM. Si vous faites vos premiers pas en JavaScript et que l’acronyme « DOM » sonne encore un peu mystérieux, alors installez-vous confortablement. Ce guide est conçu pour vous montrer, étape par étape, comment prendre les rênes de vos pages HTML, même si vous partez de zéro.
Ensemble, à travers des exemples concrets et parlants, nous allons décortiquer comment le Document Object Model (DOM) fait le pont entre votre code JavaScript et la structure, les styles, et le contenu de vos pages. Accrochez-vous, on va donner vie à vos créations web !
Si par contre vous êtes déjà averti, allez voir ce qu’est le shadow DOM 😉
Qu’est-ce que le DOM Exactement ? Une Interface Essentielle
Avant de mettre les mains dans le cambouis, une petite mise au point s’impose : qu’est-ce que le DOM, au juste ? Cet acronyme signifie Document Object Model. Visualisez votre page HTML comme un grand arbre : chaque élément – un titre, un paragraphe, une image, une simple <div> – en est une branche ou une feuille, un « nœud ». Le DOM, c’est la carte de cet arbre, une représentation organisée et hiérarchique de tous ces nœuds, qui reflète leur emboîtement dans votre code HTML.
Mais cet arbre n’est pas qu’une simple représentation passive. C’est une véritable interface de programmation (on parle d’API) qui ouvre la porte à des langages comme JavaScript. Grâce au DOM, JavaScript peut lire, analyser, et surtout modifier à la volée le contenu, la structure et même le style de la page. Sans lui, nos scripts seraient bien impuissants à interagir avec ce que l’utilisateur voit. C’est LA pièce maîtresse pour bâtir des expériences utilisateur dynamiques et engageantes, bien loin des pages web figées d’antan.
Les Outils Indispensables pour Commencer à Manipuler le DOM
Bonne nouvelle ! Pour vous lancer dans la manipulation du DOM et suivre ce tutoriel, vous n’avez besoin que d’un équipement minimaliste :
- Votre navigateur web favori : Que vous soyez plutôt Chrome, Firefox, Edge ou Safari, tous embarquent des outils de développement précieux, notamment une console JavaScript. C’est notre laboratoire pour observer les effets de nos scripts.
- Un éditeur de code : Visual Studio Code (gratuit et ultra-populaire), Sublime Text, Brackets, ou même un éditeur plus simple feront l’affaire pour écrire nos lignes de HTML et de JavaScript.
Pour mettre tout ça en pratique, créons un fichier HTML basique. Nommez-le index.html et copiez-y le code ci-dessous. C’est notre terrain de jeu pour les exemples à venir :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel DOM JavaScript</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.highlight {
background-color: yellow;
font-weight: bold;
}
.important-text {
color: blue;
font-size: 20px;
}
#conteneur { padding: 10px; border: 1px solid #ccc; margin-top:15px;}
button { padding: 8px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;}
button:hover { background-color: #2980b9;}
</style>
</head>
<body>
<h1 id="titrePrincipal">Mon Titre Initial</h1>
<p class="paragraphe">Ceci est le premier paragraphe.</p>
<p class="paragraphe">Ceci est le deuxième paragraphe avec une <span>information</span> dedans.</p>
<div id="conteneur">
<button id="monBouton">Cliquez-moi !</button>
</div>
<ul id="maListe">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
// C'est ici que la magie JavaScript va opérer !
console.log("Page chargée, script prêt à l'action !");
</script>
</body>
</html>
Ouvrez ce fichier index.html dans votre navigateur. Le titre, les paragraphes, le bouton et la liste devraient s’afficher sagement. Parfait, nous sommes parés pour commencer à dialoguer avec ces éléments grâce à JavaScript !
Étape 1 : Sélectionner des Éléments HTML avec JavaScript
Avant de pouvoir modifier quoi que ce soit, il faut dire à JavaScript : « C’est CET élément-là que je veux ! » Pour manipuler le DOM, la sélection est donc le point de départ incontournable. JavaScript nous offre pour cela une panoplie de méthodes.
getElementById() : La méthode la plus directe et souvent la plus rapide
Si un élément de votre page HTML porte un attribut id (qui doit être unique, rappelons-le), alors getElementById() est votre meilleur allié pour le récupérer en un clin d’œil.
Concrètement : Attrapons notre titre H1, celui qui a l’id="titrePrincipal".
// À placer dans la balise <script> de votre index.html
const titre = document.getElementById('titrePrincipal');
console.log(titre); // Jetez un œil dans la console, l'élément H1 s'y affiche !
getElementsByTagName() : Cibler par type de balise
Cette fonction ratisse plus large : elle vous retourne une collection (un peu comme un tableau, mais avec quelques spécificités) de tous les éléments qui correspondent à un nom de balise donné (p, div, li, etc.).
Voyons ça : Sélectionnons tous les paragraphes <p> de notre page.
const tousLesParagraphes = document.getElementsByTagName('p');
console.log(tousLesParagraphes); // Vous verrez une HTMLCollection des paragraphes
console.log(tousLesParagraphes[0]); // Pour accéder au premier paragraphe (l'index commence à 0)
getElementsByClassName() : La sélection par classe CSS
Très similaire à la précédente, mais cette fois, le critère de sélection est l’attribut class des éléments.
Exemple pratique : Récupérons tous les éléments qui portent la classe paragraphe.
const paragraphesAvecClasse = document.getElementsByClassName('paragraphe');
console.log(paragraphesAvecClasse); // Encore une HTMLCollection, mais filtrée par la classe !
querySelector() et querySelectorAll() : La puissance des sélecteurs CSS modernes
Là, on monte d’un cran en flexibilité ! Ces deux méthodes vous permettent d’utiliser toute la richesse des sélecteurs CSS que vous connaissez déjà (ou que vous allez adorer découvrir) pour cibler vos éléments. querySelector() s’arrête au premier élément qu’il trouve, tandis que querySelectorAll() les prend tous et vous les retourne dans une NodeList (là aussi, un cousin du tableau).
Quelques exemples pour sentir la puissance :
// Cibler le tout premier élément avec la classe "paragraphe"
const premierParagraphe = document.querySelector('.paragraphe'); // Notez le '.' comme en CSS
console.log(premierParagraphe);
// Cibler l'élément unique avec l'id "conteneur"
const divConteneur = document.querySelector('#conteneur'); // Et le '#' pour les IDs
console.log(divConteneur);
// Sélectionner tous les items <li> à l'intérieur de la liste <ul id="maListe">
const itemsDeListe = document.querySelectorAll('#maListe li'); // Combinaison de sélecteurs !
console.log(itemsDeListe); // Une NodeList apparaît
itemsDeListe.forEach(item => { // On peut facilement boucler sur une NodeList
console.log("Un item de liste : ", item);
});
Étape 2 : Modifier le Contenu des Éléments du DOM
Maintenant qu’on sait comment mettre la main sur nos éléments, il est temps de jouer avec ce qu’ils affichent. Changer un texte, ajouter du HTML… c’est parti !
Changer le texte avec textContent et innerText
Ces deux propriétés sont vos outils pour lire ou réécrire le contenu purement textuel d’un nœud et de tout ce qu’il contient. C’est simple et direct.
Action ! Modifions le texte de notre titre H1.
const titre = document.getElementById('titrePrincipal'); // On le re-sélectionne pour l'exemple
titre.textContent = "Titre Super Dynamique ! Bienvenue !";
Une petite nuance : textContent vous donne l’intégralité du texte, même celui qui serait caché par du CSS. innerText, lui, est plus malin et essaie de ne retourner que le texte tel qu’il est visible par l’utilisateur. Pour débuter, textContent est souvent un excellent choix pour sa simplicité.
Modifier le HTML avec innerHTML
Avec innerHTML, vous avez les pleins pouvoirs sur tout le code HTML contenu à l’intérieur d’un élément. Vous pouvez lire ce HTML, ou le remplacer intégralement.
Démonstration : Injectons un nouveau paragraphe directement dans notre <div id="conteneur">.
const conteneur = document.getElementById('conteneur');
// On ajoute au contenu existant grâce à '+='
conteneur.innerHTML += '<p style="color: green;">Ce paragraphe a été <strong>ajouté par JavaScript</strong> !</p>';
// Si on avait utilisé juste '=', tout le contenu précédent du conteneur (y compris le bouton) aurait été effacé.
Un mot de prudence : innerHTML est puissant, mais à utiliser avec discernement. Si vous injectez du contenu qui vient d’une source non sûre (comme une saisie utilisateur non validée), vous ouvrez la porte à des failles de sécurité (les fameuses attaques XSS). Pour du simple texte, textContent est votre ami plus sûr.
Étape 3 : Agir sur les Styles CSS via le DOM
Modifier le contenu, c’est bien. Modifier l’apparence, c’est encore mieux ! JavaScript vous permet de changer dynamiquement les styles CSS de vos éléments.
Accéder et modifier les styles en ligne avec element.style
Chaque élément HTML dans le DOM possède une propriété style. Elle vous donne un accès direct aux styles CSS appliqués « en ligne » à cet élément (comme si vous les aviez mis dans l’attribut style="..." en HTML).
Faisons briller les choses : Changeons la couleur de fond du premier paragraphe et donnons un coup de jeune au titre.
const premierParagraphe = document.querySelector('.paragraphe'); // On attrape le premier
premierParagraphe.style.backgroundColor = 'hsl(180, 70%, 90%)'; // Un joli bleu ciel pastel
premierParagraphe.style.padding = '15px';
premierParagraphe.style.borderRadius = '5px';
const titre = document.getElementById('titrePrincipal');
titre.style.fontSize = '2.8em'; // Un peu plus grand
titre.style.color = '#e74c3c'; // Un rouge tomate
titre.style.textShadow = '1px 1px 2px #aaa';
Petite astuce de syntaxe : les propriétés CSS avec des tirets, comme background-color, se transforment en camelCase en JavaScript : backgroundColor. C’est une convention à retenir.
Ajouter et supprimer des classes CSS avec classList : la méthode élégante
Modifier les styles un par un avec element.style, c’est bien pour des ajustements rapides. Mais pour des changements plus complexes ou pour garder votre CSS bien organisé, il y a une approche bien plus propre : définir des classes dans votre CSS, puis les ajouter ou les retirer de vos éléments avec JavaScript. C’est là qu’intervient la propriété classList.
En action : Utilisons notre classe highlight (définie dans le <style> de notre HTML) pour mettre en valeur le deuxième paragraphe.
const deuxiemeParagraphe = document.querySelectorAll('.paragraphe')[1]; // Le deuxième de la liste
deuxiemeParagraphe.classList.add('highlight');
// Et si on veut l'enlever plus tard ?
// deuxiemeParagraphe.classList.remove('highlight');
// Ou encore mieux, la basculer (l'ajouter si elle manque, l'enlever si elle est là) :
// deuxiemeParagraphe.classList.toggle('highlight'); // Essayez de cliquer plusieurs fois sur un bouton qui ferait ça !
classList est une petite boîte à outils bien pratique avec ses méthodes add(), remove(), toggle() (super utile pour des interrupteurs visuels), et contains() (pour vérifier si un élément a déjà une classe).
Étape 4 : Créer et Ajouter de Nouveaux Éléments au DOM (Bonus Facile)
Modifier, c’est bien, mais saviez-vous que vous pouvez aussi jouer les architectes et construire de nouveaux éléments HTML de A à Z pour ensuite les insérer où bon vous semble dans votre page ?
document.createElement() et appendChild() : vos outils de construction
Avec document.createElement('nomDeLaBalise'), vous donnez naissance à un nouvel élément HTML (un <p>, un <div>, un <img>…). Une fois créé, il faut encore lui trouver une place : c’est le rôle de elementParent.appendChild(nouvelElement), qui l’ajoute comme dernier enfant de l’elementParent.
Construisons ensemble : Ajoutons un troisième larron à notre liste <ul id="maListe">.
// 1. On repère le futur parent
const liste = document.getElementById('maListe');
// 2. On fabrique notre nouvel élément <li>
const nouvelItem = document.createElement('li');
// 3. On lui donne quelque chose à dire
nouvelItem.textContent = 'Item 3 (créé de toutes pièces par JS !)';
// 4. On peut même lui donner un style via une classe (celle définie dans notre CSS)
nouvelItem.classList.add('important-text');
// 5. Et hop, on l'accroche à la liste !
liste.appendChild(nouvelItem);
Et voilà comment, sans toucher à votre fichier HTML initial, vous pouvez enrichir dynamiquement la structure de votre page. Magique, non ?
Aller Plus Loin avec la Manipulation du DOM
Félicitations ! Vous venez de faire un tour d’horizon des techniques de base pour dialoguer avec le DOM en JavaScript. Sélectionner des éléments, en modifier le contenu, l’apparence, et même en créer de nouveaux n’a (presque) plus de secrets pour vous. C’est une compétence absolument cruciale dans la panoplie de tout développeur web qui se respecte.
Alors, quelle est la suite logique ? S’intéresser à la **gestion des événements DOM**. C’est ce qui va vous permettre de faire réagir votre page aux actions de l’utilisateur : un clic sur un bouton (comme notre #monBouton qui n’attend que ça !), un survol de la souris, une touche pressée au clavier, la soumission d’un formulaire… Les possibilités deviennent alors infinies pour créer de l’interactivité.
Le secret, maintenant, c’est de mettre la main à la pâte. Modifiez les exemples, ciblez d’autres éléments, combinez les techniques, inventez de petits scénarios. Considérez le DOM comme votre bac à sable géant : plus vous expérimenterez, plus vous maîtriserez l’art de sculpter des pages web vivantes et réactives. Alors, à vous de jouer !
0 commentaire