Sélectionner plusieurs éléments

Objectif

Sélectionner tous les éléments correspondant à un sélecteur avec querySelectorAll.

Contexte

querySelectorAll retourne une liste de tous les éléments correspondants :

// Sélectionne TOUS les paragraphes
const paragraphes = document.querySelectorAll("p")

console.log(paragraphes.length)  // Nombre d'éléments

// Parcourir avec forEach
paragraphes.forEach(function(p) {
  console.log(p.textContent)
})

querySelector vs querySelectorAll

Consigne

1. Sélectionne tous les éléments avec la classe "produit"
2. Affiche le nombre de produits avec console.log
3. Parcours la liste avec forEach et affiche chaque produit

Résultat attendu :

• La console affiche "Nombre de produits : 3"
• Puis chaque produit est affiché
• Les produits deviennent jaunes (surbrillance)