Des badges « Nouveauté » — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

Des badges « Nouveauté »

Le DOM : lire et modifier la page · niveau 1 (application)

Énoncé

Une liste de cartes contient des titres <h2>. Ajouter à chaque titre figurant dans un ensemble de nouveautés un <span class="badge">Nouveauté</span>. Que vaut ensuite le textContent du premier titre, et pourquoi faudrait-il en tenir compte avant de comparer des titres ?

Corrigé


const nouveautes = new Set(["Programmation Java", "Analyse MPSI"]);

for (const h2 of document.querySelectorAll("#cartes h2")) {
  if (nouveautes.has(h2.textContent)) {
    const badge = document.createElement("span");
    badge.className = "badge";
    badge.textContent = "Nouveauté";
    h2.append(badge);
  }
}
console.log(document.querySelectorAll(".badge").length);
console.log(document.querySelector("#cartes h2").textContent);


2
Programmation JavaNouveauté

textContent concatène les textes de tous les descendants : le badge fait désormais partie du « titre ». Un code qui comparerait ensuite ce texte au titre du livre ne le trouverait plus. D'où l'intérêt de garder l'identité d'une carte dans un attribut (dataset.isbn) plutôt que dans son texte.