Le DOM (Document Object Model) est un système de représentation des éléments d’un document HTML en tant qu’objets pouvant être manipulés par le langage de programmation JavaScript. Cela signifie que, lorsque vous utilisez JavaScript pour travailler avec le DOM, vous pouvez ajouter, supprimer, modifier ou accéder à des éléments HTML de votre page web.
Dans cet exemple, nous allons utiliser le code HTML suivant pour illustrer les différentes techniques de manipulation du DOM:
<div id="container">
<h1 class="title">Mon titre</h1>
<p class="description">Ma description</p>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
Sélection de noeuds du DOM
Pour manipuler le DOM, il est tout d’abord nécessaire de sélectionner les noeuds que vous souhaitez modifier. Il existe plusieurs méthodes pour sélectionner des noeuds en JavaScript:
- La méthode
document.getElementById
permet de sélectionner un noeud en fonction de son ID. Par exemple, pour sélectionner la div avec l’ID « container », vous pouvez utiliser la syntaxe suivante:
const container = document.getElementById('container');
- La méthode
document.getElementsByClassName
permet de sélectionner une liste de noeuds en fonction de leur classe. Par exemple, pour sélectionner tous les éléments li avec la classe « item », vous pouvez utiliser la syntaxe suivante:
const items = document.getElementsByClassName('item');
- La méthode
document.querySelector
permet de sélectionner le premier noeud qui correspond à un sélecteur CSS. Par exemple, pour sélectionner le premier élément li de la liste, vous pouvez utiliser la syntaxe suivante:
const firstItem = document.querySelector('li');
Cette méthode retourne le premier élément qui correspond au sélecteur spécifié. Si aucun élément n’est trouvé, la valeur retournée est null.
- La méthode document.querySelectorAll est similaire, mais retourne un tableau contenant tous les noeuds qui correspondent au sélecteur spécifié. Par exemple:
const items = document.querySelectorAll('li');
Cette méthode permet de sélectionner plusieurs éléments en même temps. Vous pouvez parcourir ces éléments en utilisant une boucle, comme nous l’avons vu dans le chapitre sur les boucles.
Si vous avez suivis le chapitre sur les boucles, Sachez que vous pouvez utiliser la méthode forEach
de l’objet Array avec document.querySelectorAll('li')
, voici comment procéder :
document.querySelectorAll('li').forEach(function(li) {
// Code à exécuter pour chaque élément li
});
Ce code va sélectionner tous les éléments li de la page et exécuter un certain code pour chaque d’entre eux. Par exemple, si vous voulez ajouter un événement « click » à chaque élément li, vous pouvez utiliser ceci :
document.querySelectorAll('li').forEach(function(li) {
li.addEventListener('click', function() {
console.log('L\'élément li a été cliqué !');
});
});
Vous pouvez également utiliser une fonction fléchée à la place de la fonction anonyme :
document.querySelectorAll('li').forEach(li => {
li.addEventListener('click', () => {
console.log('L\'élément li a été cliqué !');
});
});
- Il est également possible de sélectionner des éléments en utilisant leurs identifiants ou leurs classes comme nous pouvons le faire en CSS. Par exemple:
const container = document.querySelector('#container');
const title = document.querySelector('.title');
En utilisant cette syntaxe, vous pouvez sélectionner des éléments en fonction de leurs identifiants ou de leurs classes. Cela peut être utile si vous souhaitez manipuler spécifiquement ces éléments en javascript.
Il existe de nombreuses autres manières de sélectionner des éléments dans le DOM en javascript, mais ces méthodes sont souvent utilisées et sont une bonne base pour commencer.
Modifier le DOM en Javascript
Maintenant que vous avons vu différentes méthodes pour obtenir un élément en particulier dans notre code HTML, nous allons voir comment nous pouvons modifier le DOM en ajoutant du contenu ou en modifiant le texte ou le css.
Ajouter du HTML en Javascript
Vous pouvez ajouter du HTML à un élément du DOM en utilisant la propriété innerHTML. Par exemple, pour ajouter un paragraphe à la fin de la liste :
const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';
Ajouter un nouvel élément en Javascript
Vous pouvez également créer un nouvel élément et l’ajouter à un élément du DOM en utilisant la méthode appendChild. Par exemple, pour ajouter un paragraphe à la fin de la liste :
const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);
Changer le texte d'un élément en Javascript
Vous pouvez changer le texte d’un élément en utilisant la propriété textContent. Par exemple, pour changer le texte du titre :
const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';
Ajouter du CSS à un élément Javascript
Vous pouvez ajouter du CSS à un élément du DOM en utilisant la propriété style. Par exemple, pour mettre le paragraphe en rouge et en gras :
const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';
Vous pouvez également utiliser la méthode setAttribute pour ajouter du CSS à un élément. Par exemple :
const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');
Conclusion
Il existe de nombreuses autres manières de manipuler le CSS d’un élément du DOM en javascript, mais ces méthodes sont souvent utilisées et sont une bonne base pour commencer.
En plus de manipuler le CSS, vous pouvez également manipuler d’autres aspects d’un élément du DOM, comme son contenu HTML ou texte ou y greffer des événements au clicks, quand on survol le texte, etc..
Nous allons voir dans le prochain chapitre les événements en Javascript et comment travailler avec.
Tutoriel Javascript
- 1 - Introduction à Javascript
- 2 - Variables et types de données
- 3 - Opérateurs et expressions
- 4 - Les conditions (if, switch)
- 5 - Boucles (for, foreach, while)
- 6 - Les fonctions
- 7 - Les objets
- 8 - Propriétés et méthodes de l’objet Math
- 9 - Manipulation de la page HTML avec Javascript
- 10 - Événements et gestionnaire d’événements
- 11 - Introduction aux classes et aux objets en Javascript (ES6)
- 12 - Gestion des erreurs et débogage
- 13 - Intro aux modules et import/export (ES6)
- 14 - TP jeu de devinette
Newsletter
Ne manquez jamais les nouveaux conseils, tutoriels et autres.
Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.