Manipulation du DOM

Définition du DOM (Document Object Model)

Le DOM (Modèle d'Objet de Document) est une interface de programmation pour les documents HTML et XML. Il représente la structure d'un document sous forme d'arborescence, où chaque élément HTML (texte, images, liens, etc.) est un nœud manipulable. Le DOM permet ainsi aux langages de programmation, comme JavaScript, d'accéder et de modifier dynamiquement la structure, le style et le contenu d'une page web.

Structure du DOM

Nœud racine : l'élément <html> est le point d'entrée de l'arbre DOM.
Nœuds enfants : chaque élément (balise) dans HTML peut avoir des enfants (comme <body>, <div>, etc.), formant une structure hiérarchique.
Nœuds de texte : le contenu des balises (comme le texte dans <p>) est aussi considéré comme un nœud distinct.

Accéder aux éléments du DOM avec JavaScript

JavaScript permet d'accéder aux éléments du DOM grâce à des méthodes qui ciblent les balises selon leur identifiant, classe, balise, ou sélecteur CSS. Voici les méthodes les plus courantes :

document.getElementById("id") : sélectionne un élément unique par son identifiant.
document.getElementsByClassName("class") : sélectionne tous les éléments ayant une classe spécifique.
document.getElementsByTagName("tag") : sélectionne tous les éléments d'un certain type de balise.
document.querySelector("selector") : sélectionne le premier élément correspondant à un sélecteur CSS.
document.querySelectorAll("selector") : sélectionne tous les éléments correspondant à un sélecteur CSS.

Exemple

// Sélection d'un élément par ID
let titre = document.getElementById("titre");
console.log(titre.textContent);

Modifier le contenu et les attributs des éléments

Une fois un élément sélectionné, JavaScript permet de modifier son contenu, ses attributs, et son style.

Changer le texte : .textContent ou .innerHTML
Modifier un attribut : .setAttribute("attribut", "valeur")
Changer le style : .style.propriété = "value"

Exemple

// Changer le texte d'un élément
titre.textContent = "Nouveau Titre";

// Modifier un attribut
titre.setAttribute("class", "nouvelle-classe");

// Changer le style
titre.style.color = "blue";

Ajouter et supprimer des éléments

JavaScript permet également d'ajouter ou de retirer dynamiquement des éléments dans le DOM.

Créer un nouvel élément : document.createElement("tag")
Ajouter l'élément : parentElement.appendChild(newElement)
Supprimer un élément : parentElement.removeChild(childElement)

Exemple

// Créer un nouvel élément <p> et l'ajouter dans le <div> avec l'ID "conteneur"
let nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Ceci est un nouveau paragraphe.";
document.getElementById("conteneur").appendChild(nouveauParagraphe);

// Supprimer un élément existant
document.getElementById("conteneur").removeChild(nouveauParagraphe);

Manipuler les évènements dans le DOM

Les évènements permettent de déclencher des actions en réponse aux interactions de l'utilisateur, comme un clic ou le survol de la souris.

Ajouter un Écouteur d'évènement

Méthode recommandée : .addEventListener("event", function)

Exemple

// Ajouter un écouteur d'évènement au bouton pour afficher une alerte lors d'un clic
let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
    alert("Bouton cliqué !");
});

Exemples d'applications

Afficher un message au clic sur un bouton.
Changer la couleur d'un élément lorsqu'on passe la souris dessus.
Ajouter une tâche à une liste en cliquant sur un bouton.

Conclusion

La manipulation du DOM avec JavaScript est essentielle pour créer des pages web interactives. En accédant et en modifiant les éléments du DOM, il est possible de transformer dynamiquement le contenu, la structure et le style des pages web, offrant ainsi une meilleure expérience utilisateur.