Le DOM (Document Object Model) est un concept fondamental en développement web, notamment pour la manipulation de documents HTML. En JavaScript, le DOM est une interface qui permet de représenter la structure d’un document sous forme d’objets.
Grâce à cette interface, il devient possible d’interagir avec les éléments de la page, de les modifier dynamiquement, de créer de nouveaux éléments ou encore de répondre à des événements utilisateur.
Dans ce tutoriel, nous allons explorer en profondeur le DOM en JavaScript, en abordant ses principes de base, son fonctionnement et comment vous pouvez l’utiliser pour rendre vos pages web plus interactives.
Qu’est-ce que le DOM ?
Le DOM est une représentation hiérarchique d’un document HTML ou XML. Chaque élément du document (comme les balises HTML) devient un objet dans cette hiérarchie, ce qui permet de manipuler ces éléments avec des langages de programmation, tels que JavaScript. Le DOM transforme chaque élément HTML en un nœud d’un arbre, où chaque nœud est relié à un autre (Comprendre la relation parent / enfant).
Par exemple, imaginez un document HTML simple :
<html>
<head>
<title>Page de Test</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Voici un paragraphe d'exemple.</p>
</body>
</html>Le DOM de ce document représenterait un arbre avec des nœuds pour <html>, <head>, <title>, <body>, <h1>, et <p>. Chaque élément peut être manipulé indépendamment grâce à JavaScript.
Le DOM et JavaScript
Le DOM est accessible directement par JavaScript via l’objet document, qui est un objet global dans le navigateur. Ce dernier vous permet d’interagir avec la structure HTML de la page en récupérant ou modifiant les éléments du DOM.
Voici un exemple simple pour modifier le texte d’un élément <h1> :
document.querySelector('h1').textContent = "Bonjour, monde!";Dans cet exemple, nous utilisons la méthode querySelector pour sélectionner le premier élément <h1> sur la page, puis nous modifions son contenu texte avec textContent.
Les Nœuds du DOM
Le DOM repose sur une structure en arbre, chaque élément de la page étant un nœud dans cet arbre. Il existe plusieurs types de nœuds :
- Nœuds élément : Ces nœuds correspondent aux éléments HTML eux-mêmes, comme
<div>,<p>,<h1>. - Nœuds texte : Chaque morceau de texte à l’intérieur des éléments HTML est un nœud texte.
- Nœuds attributs : Chaque attribut d’un élément HTML, comme
idouclass, est également un nœud, bien qu’il ne soit pas directement manipulable comme un nœud élément.
Voici un exemple de nœud texte dans un élément <h1> :
<h1 id="titre">Bienvenue</h1>Ici, « Bienvenue » est un nœud texte à l’intérieur du nœud élément <h1>.
Accéder aux éléments du DOM
Pour manipuler les éléments HTML via JavaScript, vous devez d’abord accéder à ces éléments. Il existe plusieurs méthodes pour sélectionner des éléments dans le DOM :
1. getElementById()
Cette méthode permet de sélectionner un élément par son id.
const titre = document.getElementById('titre');2. getElementsByClassName()
Cette méthode permet de sélectionner un ou plusieurs éléments ayant une classe spécifique.
const paragraphs = document.getElementsByClassName('paragraphe');3. getElementsByTagName()
Permet de sélectionner des éléments en fonction de leur balise HTML (par exemple, tous les <p>).
const paragraphs = document.getElementsByTagName('p');4. querySelector() et querySelectorAll()
Ces méthodes permettent de sélectionner des éléments en utilisant des sélecteurs CSS, offrant plus de flexibilité.
const firstParagraph = document.querySelector('p');
const allParagraphs = document.querySelectorAll('p');Manipuler les éléments du DOM
Une fois les éléments du DOM récupérés, vous pouvez les modifier. Voici quelques opérations courantes :
Modifier le contenu
Utilisez textContent ou innerHTML pour modifier le contenu textuel ou HTML d’un élément.
const titre = document.querySelector('h1');
titre.textContent = "Bienvenue sur mon blog";La balise <h1> a maintenant comment texte :
<h1>Bienvenue sur mon blog</h1>Modifier les attributs
Vous pouvez aussi modifier les attributs des éléments avec setAttribute().
const titre = document.getElementById('titre');
titre.setAttribute('class', 'nouvelle-classe');La balise <h1> a maintenant un nouvelle attribut Class qui a pour valeur « nouvelle-classe » :
<h1 class="nouvelle-classe">Bienvenue sur mon blog</h1>Ajouter ou supprimer des éléments
Vous pouvez créer de nouveaux éléments et les ajouter au DOM avec createElement() et appendChild().
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?const nouveauParagraphe = document.createElement('p');
nouveauParagraphe.textContent = "Ceci est un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);Ajouter des événements au DOM
Les événements en JavaScript sont essentiels pour rendre vos pages web interactives. L’ajout d’événements vous permet de réagir à des actions des utilisateurs, telles que des clics, des frappes au clavier ou des mouvements de la souris.
Les événements permettent d’interagir avec les éléments du DOM en fonction des actions de l’utilisateur. Par exemple, vous pouvez détecter un clic sur un bouton ou une soumission de formulaire.
1. addEventListener()
La méthode addEventListener() est l’approche moderne pour ajouter des événements en JavaScript. Elle permet de spécifier l’événement que vous souhaitez écouter, ainsi que la fonction à exécuter lorsqu’un événement se produit.
Voici un exemple d’ajout d’un événement de clic sur un bouton :
const bouton = document.querySelector('#monBouton');
bouton.addEventListener('click', function() {
alert('Le bouton a été cliqué !');
});Dans cet exemple, nous écoutons l’événement click sur un bouton et exécutons une fonction qui affiche une alerte.
2. Types d’événements courants
Il existe de nombreux types d’événements que vous pouvez écouter sur des éléments du DOM. Voici quelques exemples :
- click : L’utilisateur clique sur un élément.
- mouseover : La souris survole un élément.
- mouseout : La souris quitte un élément.
- keydown : L’utilisateur appuie sur une touche du clavier.
- submit : Un formulaire est soumis.
- change : La valeur d’un élément de formulaire change.
Voici un autre exemple pour gérer un événement de soumission de formulaire :
const formulaire = document.querySelector('#monFormulaire');
formulaire.addEventListener('submit', function(event) {
event.preventDefault(); // Empêche le comportement par défaut (soumission du formulaire)
alert('Le formulaire a été soumis !');
});3. Événements avec plusieurs écouteurs
Il est possible d’ajouter plusieurs écouteurs pour un même événement sur un même élément. Cependant, cela peut avoir un impact sur les performances si vous écoutez un grand nombre d’événements.
Exemple d’ajout de plusieurs écouteurs :
const bouton = document.querySelector('#monBouton');
bouton.addEventListener('click', function() {
console.log('Premier écouteur');
});
bouton.addEventListener('click', function() {
console.log('Deuxième écouteur');
});Manipuler des éléments du DOM de manière dynamique
1. Ajouter et supprimer des classes
Les classes sont utilisées pour appliquer des styles aux éléments HTML. Vous pouvez ajouter ou supprimer des classes avec JavaScript pour changer dynamiquement l’apparence d’un élément.
const titre = document.querySelector('h1');
titre.classList.add('nouvelle-classe'); // Ajoute une classe
titre.classList.remove('ancienne-classe'); // Supprime une classe2. Modifier le style des éléments
Vous pouvez également modifier le style d’un élément directement via la propriété style.
const titre = document.querySelector('h1');
titre.style.color = 'blue'; // Change la couleur du texte
titre.style.fontSize = '2em'; // Change la taille du texte3. Cloner des éléments
Il est possible de cloner un élément du DOM et de l’ajouter à un autre endroit de la page. Cette opération peut être utile pour créer des copies d’éléments.
const titreOriginal = document.querySelector('h1');
const titreClone = titreOriginal.cloneNode(true); // true pour cloner avec les enfants
document.body.appendChild(titreClone);Optimisation des performances lors de la manipulation du DOM
Manipuler le DOM peut être coûteux en termes de performance, notamment lorsque vous devez effectuer de nombreuses modifications sur des éléments. Voici quelques techniques pour optimiser les performances de vos scripts JavaScript.
1. Utiliser la fragmentation du DOM
Lorsque vous devez ajouter plusieurs éléments à la page, il est plus performant de créer un fragment du DOM, de l’ajouter, puis de l’insérer en une seule opération.
const fragment = document.createDocumentFragment();
const div1 = document.createElement('div');
div1.textContent = 'Premier div';
fragment.appendChild(div1);
const div2 = document.createElement('div');
div2.textContent = 'Deuxième div';
fragment.appendChild(div2);
document.body.appendChild(fragment); // Ajoute les deux div en une seule opération2. Minimiser les manipulations directes du DOM
Lors de la modification de plusieurs éléments, il est préférable de regrouper les changements pour éviter de recharger constamment l’interface. Par exemple, si vous avez plusieurs éléments à modifier, il est souvent plus rapide de les modifier dans un setTimeout() ou de les traiter en lot plutôt que de les modifier un par un.
3. Manipuler des éléments invisibles
Si vous effectuez plusieurs opérations sur un élément visible, il est plus efficace de le rendre invisible (par exemple, en modifiant son style avec display: none) pendant les modifications, puis de le rendre visible une fois que toutes les manipulations sont terminées.
const element = document.querySelector('#monElement');
element.style.display = 'none'; // Cache l'élément
// Effectuer des manipulations sur l'élément
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.display = 'block'; // Affiche l'élément une fois les modifications terminéesNous avons exploré la manipulation avancée du DOM en JavaScript, en abordant la gestion des événements, la modification dynamique des éléments et l’optimisation des performances. Grâce à l’utilisation des événements, vous pouvez rendre vos pages web interactives et réactives aux actions des utilisateurs.
Nous avons également vu des techniques pour améliorer les performances de vos scripts JavaScript lors de la manipulation d’un grand nombre d’éléments dans le DOM. En suivant ces bonnes pratiques, vous pourrez développer des applications web plus rapides et plus réactives.
Le DOM est un outil puissant qui, bien maîtrisé, vous permettra de créer des pages web dynamiques et interactives. Il est essentiel pour tout développeur web de bien comprendre son fonctionnement pour pouvoir exploiter pleinement le potentiel de JavaScript.
Ce tutoriel vous permet maintenant de manipuler le DOM efficacement et d’ajouter des fonctionnalités interactives à vos pages web. Vous pouvez consulter régulièrement ce type de contenu pour approfondir vos connaissances et améliorer vos compétences en développement web.
Pour allez plus loin avec le JavaScript :
- Validation d’un formulaire en JS
- La portée des variables en JS
- Le format JSON
- Template HTML responsive Grid
- Template HTML responsive Flexbox
- 🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML
