La manipulation du DOM avec JavaScript

Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas enfin pouvoir entrer dans le vif du sujet : la manipulation du DOM avec JavaScript.

🤔 Qu'est-ce que le DOM ?

Le Document Object Model (ou DOM pour faire plus court) est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de nœuds.

Chaque élément HTML est un nœud dans l'arbre, et les nœuds peuvent contenir d'autres nœuds.
Mais un nœud peut aussi être un texte ou une propriété d'un élément !

Pour que ce soit plus facile à comprendre, voici quelques analogies pour t'aider à comprendre ce qu'est le DOM.

🤖 Manipulation du DOM

La manipulation du DOM avec JavaScript permet de modifier la structure et le contenu de la page web.
Le grand avantage du DOM est qu'il est très rapide à manipuler, et que c'est très simple à comprendre.

Mais pour le manipuler, il faut d'abord sélectionner les éléments que l'on veut modifier.

🔍 Sélectionner un élément

Pour sélectionner un élément, on peut utiliser plusieurs méthodes :

• document.getElementById(id) : Sélectionne un élément par son id (propriété HTML id).
• document.getElementsByClassName(className) : Sélectionne tous les éléments par leur className (propriété HTML class).
• document.getElementsByTagName(tagName) : Sélectionne tous les éléments par leur tagName (balise HTML).
• document.querySelector(selector) : Sélectionne le premier élément qui correspond au selector (sélecteur CSS).
• document.querySelectorAll(selector) : Sélectionne tous les éléments qui correspondent au selector (sélecteur CSS).

Voici quelques exemples commentés pour visualiser ces méthodes :

// Sélectionner un élément par son ID
// Ici, on sélectionne l'élément qui a l'ID "id"

const element = document.getElementById("id");

// Sélectionner tous les éléments par leur classe
// Ici, on sélectionne tous les éléments qui ont la classe "css-class"

const elements = document.getElementsByClassName("css-class");

// Sélectionner tous les éléments par leur balise
// Ici, on sélectionne tous les éléments qui sont des paragraphes

const elements = document.getElementsByTagName("p");

// Sélectionner le premier élément qui correspond au sélecteur
// Ici, on sélectionne le premier élément qui a la classe "css-class"

const element = document.querySelector(".css-class");

// Sélectionner tous les éléments qui correspondent au sélecteur
// Ici, on sélectionne tous les éléments qui ont la classe "css-class"

const elements = document.querySelectorAll(".css-class");

Selon la méthode utilisée, on peut récupérer un élément ou une liste d'éléments.
Pour mémoriser ces méthodes, fais attention à la présence du pluriel dans le nom de la méthode :

• getElementById (singulier) : Retourne un élément.
• getElementsByClassName (pluriel) : Retourne une liste d'éléments.
• getElementsByTagName (pluriel) : Retourne une liste d'éléments.
• querySelector (singulier) : Retourne un élément.
• querySelectorAll (pluriel) : Retourne une liste d'éléments.

✏️ Modifier le contenu d'un élément

Pour modifier le contenu d'un élément, on retrouve trois propriétés :

• element.innerHTML : Modifie le contenu HTML de l'élément.
• element.innerText : Modifie le contenu texte de l'élément.
• element.textContent : Modifie le contenu texte de l'élément.

Voici quelques exemples commentés pour visualiser ces propriétés :

// Modifier le contenu HTML de l'élément

const element = document.getElementById("id");

element.innerHTML = "<p>Nouveau contenu</p>";

// Modifier le contenu texte de l'élément

const element = document.getElementById("id");

element.innerText = "Nouveau contenu";

// Modifier le contenu texte de l'élément

const element = document.getElementById("id");

element.textContent = "Nouveau contenu";

Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ces deux propriétés dans la documentation de MDN :

🔧 Modifier les attributs d'un élément

On a eu l'occasion de voir comment modifier le contenu d'un élément, mais on peut également modifier ses attributs.
Pour modifier les attributs d'un élément, on peut utiliser la méthode element.setAttribute(attribute, value).

Mais avant d'aller plus loin...

En conservant l'exemple de l'image, on peut modifier son attribut src pour changer l'image affichée.

const image = document.getElementById("image-id");

image.setAttribute("src", "https://example.com/image.jpg");

Si maintenant on souhaite supprimer un attribut, on aura une méthode similaire : element.removeAttribute(attribute).

const image = document.getElementById("image-id");

image.removeAttribute("src");

D'autres variantes existent pour manipuler les attributs d'un élément :

• element.hasAttribute(attribute) : Vérifie si l'élément a un attribut.
• element.getAttribute(attribute) : Récupère la valeur d'un attribut.
• element.toggleAttribute(attribute, value) : Ajoute ou supprime un attribut.

const image = document.getElementById("image-id");

if (image.hasAttribute("src")) {
	const attributeValue = image.getAttribute("src");
	console.log("L'attribut src a la valeur :", attributeValue);
}

const button = document.getElementById("button-id");

// Alterne l'attribut disabled entre true et false (vrai ou faux)
button.toggleAttribute("disabled");

const button = document.getElementById("button-id");

const shouldDisable = true;

// Passe l'attribut disabled à un état forcé,
// en fonction de la valeur de shouldDisable
button.toggleAttribute("disabled", shouldDisable);

Et en réalité, c'est à peu près tout pour la modification des attributs d'un élément !
Avec une exception pour...

🔄 Modifier les classes d'un élément

Pour modifier les classes d'un élément, on n'utilise pas la méthode element.setAttribute(), mais plutôt les méthodes présentes dans la propriété element.classList.

element.classList est une propriété qui contient une liste de classes de l'élément (en lecteur seule, impossible de modifier directement la liste), mais qui a également des méthodes pour les manipuler.

Les fameuses méthodes sont :

• element.classList.add(className) : Ajoute une classe à l'élément.
• element.classList.remove(className) : Supprime une classe de l'élément.
• element.classList.toggle(className) : Ajoute ou supprime une classe de l'élément.
• element.classList.contains(className) : Vérifie si l'élément a une classe.

const element = document.getElementById("element-id");

// Ajoute la classe css-class
element.classList.add("css-class");

const element = document.getElementById("element-id");

// Ajoute les classes css-class, css-class-2 et css-class-3
element.classList.add("css-class", "css-class-2", "css-class-3");

const element = document.getElementById("element-id");

// Supprime la classe css-class
element.classList.remove("css-class");

const element = document.getElementById("element-id");

// Supprime les classes css-class, css-class-2 et css-class-3
element.classList.remove("css-class", "css-class-2", "css-class-3");

const element = document.getElementById("element-id");

// Retourne true si l'élément a la classe css-class, false sinon
element.classList.contains("css-class");

const element = document.getElementById("element-id");

// Ajoute ou supprime la classe css-class,
// en fonction de sa présence ou non
element.classList.toggle("css-class");

const element = document.getElementById("element-id");

const shouldToggle = true;

// Alterne la classe css-class entre true et false (vrai ou faux),
// en fonction de la valeur de shouldToggle
element.classList.toggle("css-class", shouldToggle);

Plutôt simple à utiliser, non ? 😏

🎨 Modifier les styles d'un élément

Maintenant que l'on sait comment modifier le contenu d'un élément, ses attributs et ses classes, on peut se pencher sur les styles.

Comme pour les classes, on n'utilise pas la méthode element.setAttribute().
On va plutôt utiliser la propriété element.style pour modifier les styles d'un élément.

element.style est une propriété qui contient un objet de styles de l'élément (en lecteur seule, impossible de modifier directement l'objet), mais qui a également des méthodes pour les manipuler.

On retrouve les méthodes suivantes :

• element.style.setProperty(property, value) : Modifie la valeur d'un style.
• element.style.getPropertyValue(property) : Récupère la valeur d'un style.
• element.style.removeProperty(property) : Supprime un style.

const element = document.getElementById("element-id");

element.style.setProperty("color", "red");

const element = document.getElementById("element-id");

const styleValue = element.style.getPropertyValue("color");

const element = document.getElementById("element-id");

element.style.removeProperty("color");

Ici encore, on reste sur de l'utilisation relativement simple !

🔨 Créer un élément

Personnaliser des éléments c'est top, mais les créer c'est encore mieux !

Mais alors, sous le capot, que font ces outils ?

Pour créer un élément, on peut utiliser la méthode document.createElement(tagName).
Cette méthode fonctionne de la même manière que les méthodes de sélection d'éléments que l'on a vu précédemment.

Elle prend en paramètre le nom de la balise HTML de l'élément à créer et retourne un objet représentant l'élément créé.

const element = document.createElement("div");

Une fois l'élément créé, on peut l'ajouter à la page en utilisant la méthode appendChild(element).

const element = document.createElement("div");

document.body.appendChild(element);

Il existe plusieurs méthodes pour ajouter un élément à la page :

• appendChild(element) : Ajoute un élément à la fin de l'élément parent.
• append(element1, element2, ...) : Ajoute un ou plusieurs éléments à la fin de l'élément parent.
• prepend(element) : Ajoute un élément au début de l'élément parent.
• insertBefore(newElement, existingElement) : Ajoute un élément avant un élément existant.
• insertAdjacentHTML(position, html) : Insère du HTML à une position donnée.
• insertAdjacentText(position, text) : Insère du texte à une position donnée.
• insertAdjacentElement(position, element) : Insère un élément à une position donnée.
• replaceChild(newElement, oldElement) : Remplace un élément par un autre.

Comme tu peux le voir, tu as plusieurs choix qui s'ouvrent à toi !
À toi de choisir la méthode qui te convient le mieux, en fonction de ce que tu veux faire 😉

🤝 Conclusion

Allez, on s'arrête là pour aujourd'hui !

Mais avec toutes ces propriétés et méthodes, tu as de quoi manipuler le DOM comme un pro ! 😎
Tu peux aller encore plus loin en utilisant des événements pour réagir à des actions de l'utilisateur, ou encore des observateurs pour surveiller les modifications d'un élément.

Mais c'est un autre sujet, que l'on verra dans la prochaine partie !

En attendant, n'hésite pas à t'exercer en créant des pages web avec JavaScript ! 😊