La méthode querySelectorAll()  de Element renvoie une NodeList statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

Note : Cette méthode est implémentée à partir de ParentNode, méthode  du mixin querySelectorAll() .

Syntaxe

elements = document.querySelectorAll(selecteurs);

Paramètres

selecteurs
une DOMString (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir Echapper des caractères spéciaux pour plus d'informations.

Valeur renvoyée

Une NodeList statique contenant un objet Element pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une NodeList vide si aucune correspondance n'est trouvée .

Note :  si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

Exceptions

SyntaxError
la syntaxe des chaînes selectors spécifiés n'est pas valide.

Exemples

Pour obtenir une NodeList (liste de noeuds) de tous les éléments <p>  dans le document :

var matches = document.querySelectorAll("p");

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

var matches = document.querySelectorAll("div.note, div.alert");

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un div avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments iframe dans le document qui contient un attribut nommé "data-src" :

var matches = document.querySelectorAll("iframe[data-src]");

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1":

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active=1]");

Accès aux correspondances

Une fois que la NodeList des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

Notes d'utilisation

querySelectorAll() se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

HTML

Considérez ce HTML, avec ses trois blocs <div> imbriqués.

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

JavaScript

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, pas 0!

Dans cet exemple, lors de la sélection de ".outer .inner" dans le contexte, le <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément de base sur lequel la recherche (".select") est effectuée. Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

La pseudo-classe :scope restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0

Spécification

Spécification Statut Commentaire
DOM
La définition de 'ParentNode.querySelectorAll()' dans cette spécification.
Standard évolutif Norme actuelle
Selectors API Level 2
La définition de 'ParentNode.querySelectorAll()' dans cette spécification.
Obsolete Pas de changement
DOM4
La définition de 'ParentNode.querySelectorAll()' dans cette spécification.
Obsolete Définition initiale
Selectors API Level 1
La définition de 'document.querySelector()' dans cette spécification.
Obsolete Définition originale

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1) 8 10 3.2 (525.3)
:scope pseudo-class (Oui) 32 Pas de support 15[1] 7.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Oui) 1.0 (1.9.1) ? ? (Oui)
:scope pseudo-class ? 32 Pas de support Pas de support 7.0

[1] Pris en charge dans Opera 15+ en activant les marques "Enable <style scoped>" ou "Enable experimental Web Platform features" dans chrome://flags.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, fkhannouf, tym-network, DCK, micetf
Dernière mise à jour par : loella16,