Manipuler le DOM

Manipuler le DOM
JavaScript

2 May 2021

Au-delà de jouer avec des boucles et des chaînes de caractères, JavaScript permet de manipuler un document et de jouer avec le HTML et/ou son CSS, le tout en temps réel.

Le document que nous allons pouvoir manipuler, appelé le DOM (Document Object Model) est, par exemple, la page sur laquelle vous vous trouvez à l'instant même ! Il ne s'agit pas de modifier un ensemble de pages, mais bien la page en cours.
Évidemment, dans le cadre de cet article, nous ne modifierons pas cette page. Cependant, nous supposerons que vous avez une page en cours de développement, sur laquelle nous pourrons appliquer quelques essais.

DOM

C'est une arborescence créée par votre navigateur contenant la structure HTML de la page Web chargée, ce qui permet à JavaScript de manipuler ce document.

Je vous laisse faire un essai avec ce code :

<!DOCTYPE html>
<html lang="fr"> 
  <head>
    <meta charset="utf-8">
    <title>Le DOM ?</title>
  </head>
  <body>
    <main>
      <h1>Bonjour tout le monde !</h1>
      <p>Comment allez-vous ?</p>
    </main>
    <script>
      window.onload = function() {
        console.log(document);
      }
    </script>
  </body>
</html>

Copiez ce code dans un fichier HTML et exécutez-le dans votre navigateur favori. Ouvrez l'inspecteur d'élément et regardez ce qui s'affiche dans la console ?. C'est le DOM !

Quelques termes doivent être bien compris pour la suite de cet article :

  • Node
    Corresponds à n'importe lequel des éléments du DOM, dans l'image ci-dessus : les écritures en bleu sont des nœuds.

  • Child
    C'est un nœud directement à l'intérieur dans un autre nœud. Par exemple, h1 est enfant de `main'.

  • Parent
    C'est un nœud qui a un autre nœud directement à l'extérieur. Par exemple, main est parent de h1.

  • Sibling
    Ce sont des nœuds qui ont le même parent. Par exemple, h1et p sont frères et ont le même parent main.

  • Text node
    Nœud contenant une chaîne de caractères.

querySelector() & querySelectorAll()

Grâce aux méthodes querySelector() et querySelectorAll(), nous allons pouvoir sélectionner un ou plusieurs éléments du DOM et y appliquer par la suite nos différents ajouts ou modifications.

Elles attendent un argument afin de sélectionner l'élément voulu. Vous pouvez leur passer le nom du tag HTML (a, section, img, div…), le nom d'un sélecteur CSS (.ma_classe, .container…) ou l'ID de l'élément désiré (#mon_id, #first, ...).

querySelector()

Cette méthode sélectionnera le premier élément trouvé selon l'argument passé.

let paragraph = document.querySelector('p');

Dans cet exemple, le premier élément HTML p repéré sera sélectionné et les suivants seront ignorés.

querySelectorAll()

Celle-ci sélectionnera tous les éléments repérés selon l'argument passé. Il faudra utiliser une boucle afin de retrouver chaque élément un à un.

let buttons = document.querySelectorAll('.btn .btn-danger');

Exemple de lecture avec une boucle :

buttons.forEach(button => {
    button.style.color = 'black';
    // ...
});

getElementsByTagName(), getElementsByClassName() & getElementById()

getElementsByTagName()

Placer purement le nom du tag HTML que vous souhaitez récupérer. Cette méthode vous retournera une collection HTML, soit un tableau. À lire avec une boucle si vous voulez intervenir sur les différents éléments retrouvés.

let paragraphs = document.getElementsByTagName('p');

getElementsByClassName()

Utilisez la classe CSS afin de retrouver les éléments HTML qui l'utiliseraient. Cette dernière vous retournera une collection HTML, soit un tableau. À lire avec une boucle si vous souhaitez intervenir sur les différents éléments retrouvés.

let containers = document.getElementsByClassName('container');

getElementById()

Utilisez l'ID dans le but de retrouver l'élément HTML qui l'utiliserait. Cette dernière vous retournera un seul élément, le premier trouvé. Pas besoin de boucle.

let list = document.getElementById('listUser');

Les propriétés

Une fois votre ou vos éléments retrouvés, vous avez une multitude de propriétés permettant d'y apporter des modifications. Nous allons en voir quelques-unes, les plus utilisées :

  • innerHTML
    Reprends ou change la syntaxe HTML à l'intérieur de l'élément.

  • outerHTML
    Reprends ou modifie la syntaxe HTML complète de l'élément.

  • innertText
    Reprends ou modifie la syntaxe textuelle à l'intérieur de l'élément.

  • textContent
    Reprends ou modifie la syntaxe textuelle à l'intérieur de l'élément ainsi que des ascendants.

  • dataset
    Reprends, ajoute ou modifie une valeur contenue dans un attribut "data" d'un élément.

  • setAttribute/getAttribute
    Reprends ou modifie n'importe quel attribut d'un élément.

  • classList
    https://developer.mozilla.org/fr/docs/Web/API/Element/classList
    Permet de "jouer" sur les classes CSS d'un élément.

  • style
    https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/style
    Aide à jouer sur le style CSS d'un élément.

Faisons quelques essais avec le code HTML suivant :

<!DOCTYPE html>
<html lang="fr"> 
  <head>
    <meta charset="utf-8">
    <title>Le DOM ?</title>
  </head>
  <body>
    <h1>Mon titre H1</h1>
    <ul>
      <li>Élément un de ma liste</li>
      <li>Élément deux de ma liste</li>
    </ul>
  </body>
</html>

<script>

// Récupère le contenu de H1
let titre = document.querySelector('h1');
console.log(titre); // Mon titre H1

// Modifie le contenu de H1
titre.innerText = 'Mon nouveau titre';
console.log(titre); // Mon nouveau titre

// Modifie le contenu et les balises HTML
titre.outerHTML = '<h2>Mon titre est maintenant H2</h2>';

// Sélectionne tous les LI de notre liste UL
let elements = document.querySelectorAll('li');

// Applique un style CSS à chaque élément de la liste grâce à une boucle
elements.forEach((element) => {
    // Modifie la couleur du texte en rouge
    element.style.color = 'red';
});

</script>

Créer un nouveau nœud

Jouer avec le DOM pour en modifier des valeurs, ajouter des classes CSS… c'est bien, mais on peut aussi créer de nouveaux nœuds et cela facilement !

Avant de créer un nouveau nœud, nous allons retrouver un élément dans lequel nous mettrons justement cette nouvelle création. Pour l'exemple, j'ajoute une nouvelle li à ma liste.

Dans un premier temps, je reprends ma ul :

let liste = document.querySelector('ul');

Maintenant, je crée mon nouvel élément :

let li = document.createElement('li');

J'ajoute le texte que je souhaite dans ce nouvel élément :

li.innerText = 'Element trois de ma liste';

Enfin, je peux l'ajouter à la fin de ma liste :

liste.appendChild(li);

Supprimer un nœud

Cette action est assez simple. À partir du moment où vous avez repris un élément, la suppression est facile :

let liste = document.querySelector('ul');
liste.remove();