Utiliser le DOM
Pour rappel, le DOM (Document Object Model) est la représentation, la carte d’une page web. souvenez-vous de l’arbre généalogique vu en HTML et CSS.
En Javascript, le DOM prend la forme d’un objet contenant d’autres objets enfants et ainsi de suite pour chaque élément du code HTML.
Le DOM est aussi une méthode pour accéder à tous ces objets.
En Javascript, l’objet window représente toute la fenêtre du navigateur. Il contient tout le DOM (y compris le Javascript, attention !). C’est l’objet window qui représente la portée globale d’une variable (Voir Les variables en bas de page…).
L’objet window est rarement référencé dans du code Javascript car il est nativement et automatiquement vérifié, nous avons d’ailleurs beaucoup utilisé une de ses méthodes :
console.log; qui est exactement la même chose que window.console.log;
La représentation entière de la page web par le DOM est une propriété de window :
window.document; ou simplement document;
Ceci devrait vous afficher le code complet de la page. Vous pouvez d’ailleurs préciser un peu quelle partie du document vous voulez récupérer :
document.head;
document.body;
Mais ceci ne va pas nous servir à grand chose en tant que tel si nous voulons accéder aux éléments de la page. Pour faire cela, document est lui-même une API qui a ses propres méthodes.
Récupérer des elements du DOM
Nous pouvons, grâce à document, récupérer une ou plusieurs balises HTML :
document.getElementsByTagName("p");
Comme vous pourrez le constater, Javascript récupère toutes les balises <p> de la page dans ce que nous appelons une NodeList (un « noeud »), c’est en fait très proche d’un tableau Javascript et va se comporter comme tel, ce qui nous arrange bien…
Par contre, ce n’est pas uniquement le contenu des <p> qui sont dans ce tableau mais l’ensemble des caractéristiques de chacun de ces paragraphes. Nous allons donc mettre ce tableau dans une variable pour le manipuler :
var mesParagraphes = document.getElementsByTagName("p");mesParagraphes[3];
Cette fois, la console m’affiche le 4ème <p> et son contenu (rappelez-vous que Javascript commence à compter à zéro…). Si je veux uniquement le contenu de la balise, je dois utiliser la méthode innerHTML :
mesParagraphes[3].innerHTML;
Cette fois, nous obtenons uniquement le contenu.
Comme c’est un tableau et que nous allons devoir le parcourir pour récupérer l’ensemble des contenus, le concept de boucle prend tout son sens !
for (var i = 0; i < mesParagraphes.length; i++) {
console.log(mesParagraphes[i].innerHTML);
}
Et l’opération peut être faite avec d’autres méthodes de document :
document.getElementsByClassName("maclasse");
récupère un ou plusieurs éléments grâce à leur class : <div class="maclasse">
document.getElementsByName("votreemail"); récupère par exemple un élément de formulaire grâce à son attribut name : <input type="email" name="votreemail">
document.getElementById("testid"); récupère un (et un seul !) élément grâce à son id : <div id="test">
Attention, nous avons ici une exception ! Dans la méthode getElementById, il n’y a pas de s à Element car un id est toujours unique dans une page web. Javascript ne récupère donc qu’un seul élément et ne restitue pas un tableau mais directement la balise récupérée !
Une méthode plus actuelle est basée sur la syntaxe CSS, ce qui peut nous convenir car cela ne multiplie pas les manières d’écrire le code. Toutefois, elle n’est pas toujours compatible avec des versions plus anciennes des navigateurs.
var mesLiens = document.querySelector(".maclass");
Cette méthode ne récupère qu’un seul élément (le premier qu’il trouve) et ne crée donc pas un tableau. Nous pouvons donc récupérer le contenu simplement :
mesLiens.innerHTML;
Là où le syntaxe CSS devient intéressante, c’est que nous pouvons cibler notre élément comme dans une feuille de style :
var mesLiens = document.querySelector("aside #pub1 > .maclass");
Nous ciblons ici le ou les éléments qui ont comme attribut class="maclass" et qui sont enfant direct d’un élément ayant comme attribut id="pub1" et qui lui-même est dans la balise aside
Si nous voulons, comme pour la méthode vue précédemment, récupérer tous les éléments qui ont la même balise ou la même class dans un tableau, nous utiliserons :
var mesLiens = document.querySelectorAll(".maclass");
Nous pouvons dès lors utiliser les mêmes techniques que ci-dessus pour naviguer dans ce tableau.
Modifier des éléments HTML
Puisque ce sont des tableaux, nous pouvons donc les modifier comme je modifie le contenu d’un tableau Javascript standard ? La réponse est oui, bien entendu !
mesParagraphes[3].innerHTML = "J'ai remplacé ce paragraphe !";mesParagraphes[4].innerHTML += " J'ai ajouté du contenu à ce paragraphe !";mesParagraphes[5].innerHTML += " Et je peux même y <strong>insérer du code HTML</strong> !";
Récupérer et modifier les attributs des éléments HTML
Nous allons pouvoir aussi récupérer et manipuler les attributs des éléments HTML de notre page. Par exemple, je peux récupérer l’url de cette image.
var monImage = document.querySelector("#logobzzz");var srcImage = monImage.getAttribute("src");srcImage;
Nous récupérons l’image dans la première variable et nous utilisons cette dernière pour obtenir le contenu de l’attribut src de notre image grâce à la méthode getAttribute. Nous avons donc son URL complète.
Nous pouvons donc maintenant modifier ce contenu avec la méthode setAttribute.
monImage.setAttribute("src", "https://www.helha.be/app/themes/helha/img/logo.svg");
Mieux encore, il existe des raccourcis qui vont alléger notre code et nous éviter de créer des variables encombrantes :
var monImage = document.querySelector("#logobzzz");
monImage.src;
monImage.src = ("https://www.helha.be/app/themes/helha/img/logo.svg");
Un peu comme .innerHTML, presque tout les attributs HTML peuvent donc être ciblés par un seul attribut Javascript qui remplace à la fois .getAttribute et .setAttribute.
Petite remarque pour .src toutefois, contrairement à .getAttribute qui donnera l’URL relative, .src donnera toujours l’URL absolue.
Attention ! L’expression .class est réservée par Javascript, nous devrons donc utiliser .className qui nous renverra une chaîne avec toutes les class de l’élément HTML.
Plus moderne (donc non compatible avec Internet Explorer antérieurs à 10), l’attribut .classList crée cette fois un tableau avec toutes les class de l’objet HTML. On va donc pouvoir y naviguer et les manipuler comme tout autre tableau Javascript.
var monImage = document.querySelector("#logobzzz");
monImage.classList;
Et cet attribut .classList possède des méthodes qui vont nous permettre d’exécuter rapidement des commandes simples :
monImage.classList.add("ombre"); ajoute « ombre » à la liste des class.monImage.classList.remove("normal");retire « normal » de la liste des class.monImage.classList.toggle("normal");retire « normal » de la liste des class si elle est présente et l’ajoute à la liste des class si elle en est absente.monImage.classList.contains("normal");vérifie si la class « normal » fait partie de la liste.
Vous l’aurez compris, ces manipulations de class vont nous permettre de modifier l’aspect des éléments HTML en préparant des CSS et en jouant avec les class pour les activer ou désactiver.
Il existe d’autres manières de manipuler des CSS mais la technique qui utilise le changement de class est de loin la plus souple.