1. Qu’est-ce que le Document Object Model (DOM) ?

Le DOM est la représentation objet en mémoire de l’arborescence HTML construite par le navigateur. JavaScript interagit avec cette structure arborescente pour lire, modifier, insérer ou supprimer des nœuds en temps réel sans recharger la page.

2. Sélectionner des éléments avec précision

Oubliez les anciennes méthodes lourdes. Les méthodes modernes querySelector() et querySelectorAll() acceptent n’importe quel sélecteur CSS valide :

// Sélection d'un élément unique
const boutonInscription = document.querySelector("#btn-sinscrire");

// Sélection d'une collection d'éléments
const cartesCours = document.querySelectorAll(".carte-cours");
cartesCours.forEach(carte => {
    carte.setAttribute("role", "region");
});

3. Manipulation dynamique du contenu et de la classe CSS

Pour des raisons impératives de sécurité (prévention des failles XSS), privilégiez la propriété textContent à innerHTML pour insérer du texte issu d’une saisie utilisateur. Manipulez les classes graphiques via l’API classList :

const notification = document.querySelector("#notification");
notification.textContent = "Inscription validée avec succès auprès du secrétariat de Genève.";

// Ajout et bascule de classes utilitaires
notification.classList.add("bg-green-500", "text-white", "p-4", "rounded");
notification.classList.remove("hidden");

Synthèse pédagogique : Minimisez les accès répétés au DOM en mettant en cache vos sélections d’éléments dans des variables constantes pour préserver la fluidité de rendu à 60 images par seconde.

PreviousNext