QuerySelectorAll()

querySelectorAll() permet d'effectuer une recherche dans un élément du DOM et retourne un NodeList (similaire à un tableau) correspondant au sélecteur lui étant passé. Si aucun élément n'est trouvé, il retourne un NodeList vide [].

Par exemple dans le code HTML suivant:

<div class="game">Halo</div>
<div class="game">Resident Evil</div>
<div class="game">Hitman</div>

Si une requête est effectué afin de trouver les éléments possédant la classe .game

let gamesArr = document.querySelectorAll('.game');

La NodeList suivante est retournée:

NodeList(3) [div.game, div.game, div.game]

Anatomie

Décortiquons les parties composant cette requête.

let gamesArr

Le résultat de la requête est stocké dans une variable afin de pouvoir y accéder plus tard.

document

Correspond à l'élément dans laquelle la recherche doit être effectuée.

Dans cet exemple, la recherche s'effectue à partir du document en entier. Il aurait possible d'être plus précis en partant d'un élément moins global. Par exemple, effectuer un recherche à partir d'une variable contenant un élément retourné par une requête querySelector().

featuredGames.documentQuerySelectorAll('.game');

querySelectorAll('.game')

Indique qu'un ou plusieurs éléments ayant la classe .game doivent-être trouvés à l'intérieur de l'élément précédent (document).

Heureusement, tous les sélecteurs CSS sont supportés par querySelectorAll(). Il est donc possible d'utiliser les mêmes sélecteurs en CSS qu'en JavaScript ✨.