Le DOM : lire et modifier la page

Jusqu'ici, nos programmes écrivaient dans la console. La Librairie du Campus, elle, n'a pas encore une ligne de JavaScript : son catalogue est écrit à la main dans catalogue.html, six cartes recopiées six fois, et ajouter un livre oblige à modifier le HTML. Les données des livres existent pourtant déjà sous forme d'un tableau d'objets (chapitre 5). Ce qui manque, c'est le lien entre ces données et la page.

Ce lien s'appelle le DOM (Document Object Model). Quand le navigateur lit une page, il construit en mémoire un arbre d'objets, un par élément ; c'est cet arbre qu'il affiche, et c'est cet arbre que JavaScript peut lire et modifier. Changer un objet du DOM, c'est changer ce que voit le lecteur, immédiatement, sans recharger la page. Ce chapitre apprend à trouver des éléments, à lire et modifier leur contenu, leurs attributs et leurs classes, et à en créer de nouveaux. À la fin, le catalogue de la Librairie sera fabriqué à partir de ses données.

Les pages du chapitre sont dans code/ch7/. Chacune charge son script comme un module, avec <script type="module"> : il faut donc les ouvrir par un serveur local et non en double-cliquant sur le fichier (chapitre 1). Les affichages de console reproduits ci-dessous sont ceux de Chromium.

7.1 La page est un arbre

<h1>Nouveautés</h1>
<ul id="nouveautes">
  <li class="livre">Programmation Java</li>
  <li class="livre promo">Analyse MPSI</li>
</ul>

Le navigateur transforme ce fragment en l'arbre suivant. Chaque élément est un nœud, dont les enfants sont les éléments qu'il contient ; le texte est lui aussi rangé dans des nœuds, y compris les retours à la ligne et les espaces d'indentation entre les balises.

const liste = document.querySelector("#nouveautes");
console.log(liste.tagName, liste.children.length, liste.childNodes.length);
console.log(liste.parentElement.tagName);
console.log(liste.firstElementChild.textContent);
console.log(liste.firstChild.nodeName, JSON.stringify(liste.firstChild.textContent));

UL 2 5
BODY
Programmation Java
#text "\n    "

Deux familles de propriétés permettent de naviguer :

• children, firstElementChild, parentElement, nextElementSibling ne voient que les éléments : la liste a 2 enfants ;
• childNodes, firstChild… voient tous les nœuds, y compris les textes d'indentation : 5 nœuds (texte, li, texte, li, texte).

On utilise presque toujours la première famille.

7.2 Trouver des éléments

On ne parcourt presque jamais l'arbre nœud par nœud : on demande les éléments qui correspondent à un sélecteur CSS, exactement ceux du livre CSS.

<main>
  <h1>Catalogue</h1>
  <ul class="cartes">
    <li>
      <article class="carte" data-isbn="9782956300014">
        <h2>Programmation Java</h2>
        <p class="prix">32,00 €</p>
      </article>
    </li>
    <!-- … deux autres cartes : Analyse MPSI, Le Petit Prince … -->
  </ul>
</main>

const titre = document.querySelector("h1");
console.log(titre.textContent);

const cartes = document.querySelectorAll(".carte");
console.log(cartes.length, cartes[1].querySelector("h2").textContent);

const prix = [...document.querySelectorAll(".carte .prix")].map((p) => p.textContent);
console.log(prix.join(" | "));

console.log(document.querySelector('[data-isbn="9782956300052"] h2').textContent);
console.log(document.querySelector(".panier"));

const unPrix = document.querySelector(".prix");
console.log(unPrix.closest(".carte").dataset.isbn, unPrix.matches(".carte > .prix"));

Catalogue
3 Analyse MPSI
32,00 € | 45,00 € | 8,50 €
Le Petit Prince
null
9782956300014 true