document.
Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Renvoie
- Une liste statique
NodeListavec les éléments correspondants (elle peut être vide).
Exemple
#const lessons = document.querySelectorAll('.lesson')
console.log(lessons.length)
lessons.forEach((lesson, index) => {
console.log(`${index + 1}. ${lesson.textContent}`)
})
const done = [...document.querySelectorAll('.lesson.done')].map((li) => li.textContent)
console.log(done)Définition et utilisation
#La méthode querySelectorAll() fonctionne comme querySelector(), mais renvoie tous les éléments correspondants, dans l’ordre où ils apparaissent dans le document. Le résultat est un objet NodeList, qui a une propriété length, un accès par indice (list[0]) et une méthode forEach().
NodeList n’est pas un tableau : il lui manque les méthodes map(), filter() ou reduce(). Vous le transformez en tableau avec Array.from(list) ou [...list]. Si rien ne correspond, vous obtenez une liste vide de longueur 0, et non null.
La liste est statique, c’est-à-dire que c’est une « photo » du document prise au moment de l’appel. Les éléments ajoutés plus tard n’y apparaissent pas d’eux-mêmes, et supprimer des éléments pendant le parcours de la liste est sûr.
Syntaxe
#document.querySelectorAll(selectors)
element.querySelectorAll(selectors)Paramètres
#selectors
chaîne
Un sélecteur CSS. Séparez plusieurs sélecteurs par des virgules.
Plus d’exemples
#const items = document.querySelectorAll('li[data-price]')
const total = Array.from(items).reduce((sum, item) => sum + Number(item.dataset.price), 0)
console.log(`Total : ${total} €`)const list = document.querySelector('#list')
const items = list.querySelectorAll('li')
list.append(document.createElement('li'))
console.log(items.length)
console.log(list.querySelectorAll('li').length)
console.log(list.children.length)items a gardé en mémoire l’état d’avant l’ajout de l’élément. La propriété children, elle, est une collection « vivante » qui montre toujours les enfants actuels.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Besoin de
map()ou defilter()? Transformez le résultat en tableau :[...document.querySelectorAll(".card")]. - Ne testez pas le résultat avec
if (list). Une liste vide est aussi un objet, donc vérifiezlist.length. - Après l’ajout de nouveaux éléments, appelez à nouveau la méthode, car une liste récupérée plus tôt ne change pas.
Entrées associées
#- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- Array.from()Crée un tableau à partir d’un objet itérable ou « semblable à un tableau ».
- Array.prototype.forEach()Appelle une fonction pour chaque élément du tableau.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.