Manipulation de la page HTML avec Javascript

9 janvier, 2023

Développement Javascript Tutoriels

Table des matières Masquer

1 Sélection de noeuds du DOM

2 Modifier le DOM en Javascript

2.1 Ajouter du HTML en Javascript

2.2 Ajouter un nouvel élément en Javascript

2.3 Changer le texte d'un élément en Javascript

2.4 Ajouter du CSS à un élément Javascript

3 Conclusion

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.