image auteur
Lucas BENTO-VERSACE 9min • 31-12-2021

Javascript - Manipulation du DOM

Javascript - Manipulation du DOM

Dans cet article, vous allez apprendre ce qu'est le DOM et comment le manipuler.

Définitions

DOM (Document Object Model)

Le DOM est une représentation de la page web sous forme d'arborescence d'objets. DOM se traduit par "Modèle objet du document". Il peut être manipulé à l'aide de Javascript, ce qui permet de modifier le HTML via du code.

C'est d'ailleurs pour ça que JavaScript a été créé en premier lieu.

La représentation du document (HTML ou XML) à travers le DOM permet de le voir comme un groupe structuré de noeuds-objets possédant différentes propriétés et méthodes.

Représentation du DOM
Représentation du DOM

Noeud (Node)

Un noeud est un objet du DOM. On peut retrouver différents types de noeud, tel que : Element, Text, Attr, Document, Comment, etc...

Élément (Element)

Un élément est un type de noeud qui représente une balise complète, par exemple : <p>, <div>, etc.

Les possibilités de JavaScript

Le JavaScript permet de rendre les pages web plus dynamiques et interactives. Avant JavaScript, l’interaction de l’utilisateur avec la page web se limitait à visiter des liens et à soumettre des formulaires.

Désormais le JavaScript rend possible :

  • La manipulation des éléments d’une page web : que ce soit leur position dans le DOM, leur contenu ou leurs attributs (i.e. les classes, le style, etc.)
  • La prise en compte des actions de l’utilisateur, tel qu’un clic sur un élément, un glisser-déposer d’un élément vers un autre, etc.

Lorsque vous visitez une page web, le navigateur récupère le code HTML qu’il analyse pour construire le DOM. Si vous modifiez le DOM avec JS, la page HTML change en même temps pour refléter le nouveau DOM.

Manipulation du DOM

Pour manipuler le DOM, JavaScript nous offre 2 types de fonctionnalités :

  • des fonctions et références qui permettent de récupérer des noeuds
  • des fonctions et assignations qui servent à modifier les noeuds récupérés

L'ensemble du DOM est atteignable via la variable document qui est accessible de manière globale dans votre script JS.

Voyons ensemble quelques exemples de manipulation du DOM.

Changer le contenu de l'élément body

La variable document possède une propriété body qui contient une référence vers la balise <body> de notre document HTML.

1
2
3
4
5
6
// Remplace le contenu de la balise body
document.body.innerHTML = '<h1>I change the body with this title !</h1>'

// Appliquer des styles au body
document.body.style.color = 'red';
document.body.style.fontSize = '60px';
Manipulation de l'élément body

Dans cet exemple, on a remplacé le contenu de la balise <body> par un titre h1 grâce à la propritété innerHTML. Si le body contenait d'autres balises, elles ont été supprimées lorsqu'on a remplacé la valeur contenu dans innerHTML.

Vous remarquez que la variable body contient une propriété style, qui vous permet de modifier l'attribut du même nom. Ici, on modifie la couleur du texte et la taille de police.

Récupérer une balise via son id

document.getElementById('idOfElement') permet de récupérer un élément via son id.

1
2
3
4
5
<body>
    <p id="first">Premier paragraphe</p>
    <p id="second">Second paragraphe</p>
    <p id="third">Troisième paragraphe</p>
</body>
exemple.html
1
2
3
4
5
6
// Get the paragraph with id second
const secondElem = document.getElementbyId('second');

// Alter both its content and style
secondElem.innerHTML = '<em>Je modifie son contenu</em> et son style';
secondElem.style.fontWeight = 'bold';
exemple.js

Une fois l'élément récupéré, vous pouvez le modifier de la même manière qu'avec l'élément body. C'est à dire en atteignant son innerHTML, ou un de ses attributs comme le style.

Récupérer plusieurs balises

On peut récupérer plusieurs éléments en un seul appel :

  • Par leur nom de balise avec document.getElementsByTagName()
  • Par leur classe avec document.getElementsByClassName()

Via le nom de la balise

1
2
3
<button>Premier bouton</button>
<button class="red">Second bouton</button>
<p class="red">Paragraphe avec la même classe que le second bouton</p>
exemple.html
1
2
3
4
5
6
7
// Get all the button element
const allButtons = document.getElementsbyTagName('button');

// Alter the button's style with loop beacause the variable is an array
for(let i = 0; i < allButtons.length ; i++){
    allButtons[i].style.backgroundColor = 'yellow';
}
exemple.js

La fonction getElementsbyTagName() renvoie un objet de type HTMLCollection. Ce n'est pas directement un tableau mais c'est un objet itérable. C'est-à dire que vous pouvez le parcourir avec une boucle for.

Si un élément du document possède le nom de balise passé en paramètre, il fera partie du résultat.

Via un nom de classe

1
2
3
<button>Premier bouton</button>
<button class="red">Second bouton</button>
<p class="red">Paragraphe avec la même classe que le second bouton</p>
exemple.html
1
2
3
4
5
// Get all elements having the class "red"
const allWithRed = document.getElementsByClassName('red');
for(let i = 0; i < allWithRed.length; i++){
    allWithRed[i].style.color = 'red';
}
exemple.js

De la même manière que getElementsbyTagName(), la fonction getElementsbyClassName() renvoie un objet de type HTMLCollection. Vous pouvez donc le parcourir également avec une boucle for.

Si un élément possède la classe demandée en paramètre parmi ses classes, il fera partie de la collection retournée.

Réagir à un évènement

La méthode element.addEventListener() permet de réagir à un évènement émis par le DOM (click, mouseover, change etc.), en appelant une fonction quand il se produit.

Cette fonction prend 2 paramètres : le type d'évènement, et la fonction à exécuter lorsque l'évènement se produit.

Voici quelques exemples.

Réagir à un clic sur un élément

1
2
3
<body>
    <button id="button1">Change mon texte !</button>
</body>
click-event.html
1
2
3
4
5
6
7
8
9
10
// Récupérer le bouton
const firstButton = document.getElementById('button1');
// Initialiser un compteur
let count = 0;
// Attacher un event listener pour l'évènement click
firstButton.addEventListener('click', () => {
    count += 1;
    const text = "J'ai cliqué " + count + "fois";
    firstButton.innerHTML = text;
});
click-event.js

Réagir à un changement de valeur d'un input

1
2
3
4
5
6
7
8
9
10
11
<select>
    <option value="kiwis">Kiwis</option>
    <option value="bananes">Bananes</option>
</select>

<select>
    <option value="carottes">Carottes</option>
    <option value="tomates">Tomates</option>
</select>

<div>Je veux manger des <span id="show-choice">?</span>.</div>
change-event.js
1
2
3
4
5
6
7
8
9
10
const choiceSpan = document.getElementById('show-shoice');
const selectors = document.getElementByTagName('select');

for(let i = 0; i < selectors.length; i++;){
    selectors[i].addEventListener('change', event => {
        // event.target contient une référence 
        // vers l'élément qui a déclenché l'event
        choiceSpan.innerHTML = event.target.value;
    });
}
change-event.js

Dans cet exemple on a récupéré tous les inputs (des selects dans notre cas) pour leur attacher un event listener.

Le handler passé en 2ème paramètre fait que pour change changement de valeur d'un des <select>, on récupère la valeur du <select> et on l'assigne au innerHTML du <span>.

Ainsi, à chaque fois qu'on change la valeur d'un des <select>, le contenu du <span> est modifié et la phrase se met à jour.

Conclusion

Voilà, vous avez vu ce qu'est le DOM et sa manipulation. Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Sources

Auteur

image auteur
Lucas BENTO-VERSACE Alternant chez Codewise / Étudiant en développement web lucas.bentoversace@ynov.com
"Alternant chez Codewise, passioné par l'informatique et les technologies depuis mon plus jeune âge. J'ai découvert le monde du web et depuis je ne m'en lasse pas ! Fan de jeux vidéos, de sports et de musiques. "