Chapitre 11 – Manipulation du DOM

1. Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation qui permet à JavaScript d'accéder, de modifier et de réagir à un document HTML. Chaque élément HTML devient un objet manipulable en JavaScript.

Le navigateur construit automatiquement ce modèle en mémoire dès qu'il lit le HTML. JavaScript peut alors interagir avec cette structure comme avec n'importe quel objet.

2. Sélection d'éléments

Pour manipuler un élément HTML, il faut d'abord le sélectionner. Il existe plusieurs méthodes :

• document.getElementById("id") : sélectionne un élément par son identifiant
• document.querySelector("sélecteur CSS") : sélectionne le premier élément correspondant
• document.querySelectorAll("sélecteur CSS") : sélectionne tous les éléments correspondants (renvoie une NodeList)
• document.getElementsByClassName("classe") : sélectionne par classe (HTMLCollection)
• document.getElementsByTagName("tag") : sélectionne par nom de balise

<div id="maDiv" class="boite">Bonjour</div>

<script>
  const div1 = document.getElementById("maDiv");
  const div2 = document.querySelector(".boite");
  console.log(div1.textContent); // "Bonjour"
</script>

3. Modification du contenu, des attributs et du style

Modifier le contenu

• element.textContent : modifie le texte brut
• element.innerHTML : modifie le contenu HTML

Modifier les attributs

• element.setAttribute("name", "value") : ajoute ou modifie un attribut
• element.getAttribute("name") : lit la valeur d'un attribut
• element.removeAttribute("name") : supprime un attribut

Modifier le style CSS

On peut modifier le style via element.style :

const div = document.querySelector(".boite");
div.style.backgroundColor = "lightblue";
div.style.fontSize = "20px";

4. Création et suppression d'éléments

Créer un élément

On utilise document.createElement("tag") :

const paragraphe = document.createElement("p");
paragraphe.textContent = "Je suis un paragraphe dynamique.";
document.body.appendChild(paragraphe);

Supprimer un élément

Pour supprimer un élément existant :

const àSupprimer = document.getElementById("maDiv");
àSupprimer.remove();

On peut aussi utiliser parent.removeChild(enfant) si l'élément est plus complexe.

5. Gestion des événements

Les événements permettent à JavaScript de réagir aux actions de l'utilisateur (clic, clavier, survol, etc.).

Ajouter un événement

On utilise addEventListener :

const bouton = document.querySelector("button");
bouton.addEventListener("click", () => {
  alert("Bouton cliqué !");
});

On peut réagir à tous les événements natifs :

• click
• mouseover / mouseout
• keydown / keyup
• submit
• etc.

Supprimer un événement

Il faut avoir la fonction sous forme nommée :

function maFonction() {
  alert("Clic !");
}
bouton.addEventListener("click", maFonction);

// Plus tard
bouton.removeEventListener("click", maFonction);