Le DOM (Document Object Model) permet de manipuler les éléments HTML dynamiquement à l'aide de JavaScript.
Pour manipuler un élément du DOM, il faut d'abord retrouver cet élément.
Si la balises HTML a un attribut id, il est possible d'y faire référence à l'aide de getElementById().
let element = document.getElementById('identifiant');
Si l'élément n'existe pas, getElementById() retournera null.
Dans cet exemple, on veut cacher l'élément dont l'id est test.
Pour assurer que le programme soit robuste et donc qu'il ne plante pas si l'élément n'est pas trouvé, on vérifiera son existance avant de tenter de le modifier.
let elementACacher = document.getElementById('test');
if (elementACacher != null) {
elementACacher.hidden = true;
}
Si jamais le code HTML était modifié et que le développeur oublie d'ajuster le code JavaScript, le code ne plantera pas. Évidemment, il ne fera pas non plus ce qu'il doit faire donc il ne sera pas fonctionnel. Mais au moins, le reste du code JavaScript pourra être exécuté.
Pour vous aider à cerner ce type de problème, vous pouvez vous laisser une trace dans la console.
let elementACacher = document.getElementById('test');
if (elementACacher != null) {
elementACacher.hidden = true;
}
else {
console.log("Impossible de retrouver la balise HTML dont l'identifiant est test.");
}
Pour effectuer une action sur tous les objets du DOM qui correspondent à une balise, utilisez getElementsByTagName().
let elements = document.getElementsByTagName('balise');
Notez le s à la suite du mot element dans le nom de la méthode. C'est que cette méthode peut retrouver 0, 1 ou plusieurs éléments.
getElementsByTagName() retournera un objet de type HTMLCollection. Si aucun élément ne correspond à la balise recherchée, on aura un HTMLCollection avec 0 éléments.
Il est possible de boucler dans les résultats comme ceci :
let paragraphes = document.getElementsByTagName('p'); // paragraphes est un HTMLCollection
for (let paragraphe of paragraphes) {
paragraphe.classList.add("important");
}
Il est également possible de sélectionner plusieurs éléments à partir de leur classe en utilisant getElementsByClassName().
let elements = document.getElementsByClassName('nom-de-la-classe');
Cette méthode retournera également un objet de type HTMLCollection.
Vous rencontrerez parfois des situations dans lesquelles c'est l'attribut name qui permet de retrouver l'élément ou les éléments recherchés, par exemple lors du traitement d'un formulaire.
On utilisera alors getElementsByName().
let elements = document.getElementsByName('attribut-name');
Cette fois, on obtiendra un objet de type NodeList.
La classe NodeList est semblable à HTMLCollection. La principale différence, c'est que NodeList est une liste statique, c'est-à-dire qu'elle ne sera pas affectée si des éléments étaient ajoutés dynamiquement à la page Web.
Pour boucler dans les éléments d'un NodeList, plusieurs techniques sont disponibles. Ma préférence va à la même que pour un HTMLCollection : transformer l'objet en tableau puis d'utiliser forEach.
let inputCode = document.getElementsByName("code");
for (let input of inputCode) {
input.value = "nouveau code";
}
Plusieurs éléments peuvent avoir le même attribut name dans une page Web. Mais souvent, ce nom sera unique.
Si vous êtes certains d'avoir un élément unique, il est possible d'éviter la boucle et de travailler directement avec le premier élément retrouvé.
Afin d'assurer que le code soit robuste et donc qu'il ne plante pas si jamais aucun élément n'était trouvé, on ajoutera un petit if avant de manipuler l'élément.
let inputCode = document.getElementsByName("code");
if (inputCode.length > 0) {
inputCode[0].value = "nouveau code";
}
Dans des cas plus particuliers, on voudra retrouver les éléments qui correspondent à quelque chose de plus précis, par exemple les paragraphes qui ont la classe important.
La méthode querySelector() permet de faire ce type de sélection. On y passera en paramètre un sélecteur CSS qui correspond à l'élément recherché.
Avec querySelector(), seul le premier élément rencontré sera retourné.
let element = document.querySelector('selecteur-css');
Puisque la méthode ne retourne que le premier élément rencontré, il suffit de vérifier si cet élément existe avant de tenter de le manipuler.
let premierParagrapheImportant = document.querySelector("p.important");
if (premierParagrapheImportant != null) {
premierParagrapheImportant.classList.remove("important");
});
La méthode querySelectorAll() fonctionne sous le même principe mais elle permet de retrouver tous les éléments qui correspondent au sélecteur CSS demandé.
let elements = document.querySelectorAll('selecteur-css');
La méthode querySelectorAll() retourne un objet de type NodeList.
let paragraphesImportants = document.querySelectorAll("p.important"); // paragraphesImportants est un NodeList
for (let paragraphe of paragraphesImportants) {
paragraphe.classList.remove("important");
}
« HTMLCollection vs NodeList ». Celeste Layne. https://medium.com/@layne_celeste/htmlcollection-vs-nodelist-4b83e3a4fb4b
▼Publicité
