La méthode querySelectorAll()
de Element
retourne une NodeList
non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.
Note : La définition de cet API a été déplacée vers l'interface ParentNode
.
Syntaxe
elementList = baseElement.querySelectorAll(selectors);
Paramètres
selectors
- une
DOMString
contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exceptionSyntaxError
est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant 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.
Valeur retournée
Une NodeList
contenant un objet Element
pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.
Note : Si le selectors
spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.
Exception
SyntaxError
- La syntaxe de la chaîne du
selectors
spécifié n'est pas correcte.
Exemples
Obtention d'une liste de correspondances
Pour obtenir une NodeList
de tous les éléments <p>
contenus dans l'élément "myBox"
:
var matches = myBox.querySelectorAll("p");
Cet exemple renvoie une liste de tous les éléments <div>
dans "myBox"
avec une classe "note
" ou "alert
" :
var matches = myBox.querySelectorAll("div.note, div.alert");
Ici, nous obtenons une liste d'éléments p
du document, dont le parent immédiat est un div
qui a la classe 'highlighted'
et qui sont inclus dans un conteneur dont l'ID 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
du document lesquels contiennent un attribut nommé 'data-src'
:
var matches = document.querySelectorAll("iframe[data-src]");
Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist"
et qui ont 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 retournée, vous pouvez l'examiner pour n'importe quel tableau (array). Si le tableau est vide (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érons ce code 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, en sélectionnant ".outer .inner"
dans le contexte <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 sur lequel la recherche est effectuée (".select")
. 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écifications
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
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 balises "Enable <style scoped>" ou "Enable experimental Web Platform features" dans chrome://flags
.
Voir aussi
- Localisation des éléments DOM avec les sélecteurs
- Sélecteurs d'attribut dans le guide CSS
- Sélecteurs d'attribut dans la zone d'apprentissage de MDN
element.querySelector()
Document.querySelector()
etDocument.querySelectorAll()
DocumentFragment.querySelector()
etDocumentFragment.querySelectorAll()
document.querySelector()
etParentNode.querySelectorAll()
- Extraits de code pour
querySelector