Le DOM : comprendre l'arbre et sélectionner des éléments

Quand le navigateur charge une page, il lit le HTML et construit en mémoire un arbre d’objets : le DOM (Document Object Model). Chaque balise devient un objet élément, avec des propriétés et des méthodes. JavaScript peut lire et modifier cet arbre ; le navigateur met alors l’affichage à jour automatiquement.

<body>
  <h1>Boutique</h1>
  <ul class="produits">
    <li class="produit" data-id="12">Sac <span class="prix">59 €</span></li>
    <li class="produit" data-id="15">Gourde <span class="prix">12 €</span></li>
  </ul>
</body>

Ici, body a deux enfants (h1 et ul), ul a deux enfants li, etc. L’onglet Éléments de l’inspecteur montre exactement cet arbre, dans son état actuel (y compris les modifications faites par JavaScript), alors que « Afficher le code source » montre le HTML d’origine.

Charger le script au bon moment

Un script ne peut manipuler que des éléments déjà construits. La solution moderne :

<head>
  <script src="app.js" defer></script>         <!-- exécuté après l'analyse du HTML -->
  <!-- ou -->
  <script type="module" src="app.js"></script> <!-- les modules sont différés par défaut -->
</head>

Sans defer ni type="module", un script placé dans le <head> s’exécute avant que le <body> existe : vos sélections renverront null.

Sélectionner avec les sélecteurs CSS

Vous connaissez déjà les sélecteurs CSS : ils servent aussi en JavaScript.

// premier élément correspondant, ou null s'il n'y en a pas
const titre = document.querySelector("h1");
const liste = document.querySelector(".produits");
const sac = document.querySelector('[data-id="12"]');

// tous les éléments correspondants : une NodeList
const produits = document.querySelectorAll(".produit");
console.log(produits.length);            // 2

for (const p of produits) {              // une NodeList se parcourt avec for...of
  console.log(p.textContent);
}
produits.forEach(p => console.log(p.dataset.id));  // ou forEach

// pour utiliser map/filter, on convertit en vrai tableau
const ids = [...produits].map(p => p.dataset.id);  // ["12", "15"]

La NodeList renvoyée par querySelectorAll est statique : elle ne se met pas à jour si on ajoute des éléments ensuite. Il faut refaire la sélection.

document.getElementById("panier") reste courant pour un id (sans le #). Les anciennes méthodes getElementsByClassName renvoient des collections « vivantes » au comportement plus surprenant : préférez querySelectorAll.

Chercher dans un élément et naviguer

const premier = document.querySelector(".produit");
premier.querySelector(".prix");     // cherche seulement à l'intérieur de ce li

premier.parentElement;              // le <ul>
premier.children;                   // ses éléments enfants
premier.nextElementSibling;         // le li suivant
premier.closest("ul");              // l'ancêtre le plus proche qui correspond (ou lui-même)
premier.matches(".produit");        // true : l'élément correspond-il au sélecteur ?

closest sera très utile pour les événements, dans la leçon sur la délégation.

Prévoir l’absence

const banniere = document.querySelector(".banniere-promo");
if (banniere) {
  banniere.hidden = false;
}
// ou avec le chaînage optionnel pour une lecture :
const texte = document.querySelector(".slogan")?.textContent ?? "";

Appeler une méthode sur null provoque l’erreur classique Cannot read properties of null. Si vous la voyez, vérifiez votre sélecteur (faute de frappe, point oublié devant une classe) et le moment de chargement du script.

Tester dans la console

Ouvrez la console du navigateur sur n’importe quelle page et tapez document.querySelectorAll("a").length : vous venez d’interroger le DOM. C’est le meilleur terrain de jeu pour expérimenter.