Element.querySelectorAll()

Résumé

Retourne un objet NodeList non-direct de tous les éléments descendants de l'élément sur lequel il a été invoqué correspondant au groupe de selecteurs CSS spécifié.

Syntaxe

elementList = baseElement.querySelectorAll(selectors);

ou

• elementList est une liste non-directe d'objects element.
• baseElement est un objet element.
• selectors est un groupe de selecteurs à cibler.

Exemples

Cet exemple renvoi une liste de tous les éléments p dans le corps du document HTML :

var matches = document.body.querySelectorAll('p'); 

Cet exemple renvoi une liste d'enfants p au sein d'un conteneur, dont le parent est un div qui a la classe 'highlighted':

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

Cet exemple renvoi une liste d'éléments iframe qui contient un attribut 'data-src':

var matches = el.querySelectorAll('iframe[data-src]'); 

Remarques

Lance une exception SYNTAX_ERR si le groupe de sélecteurs spécifié n'est pas valide.

querySelectorAll() a été introduit dans l'API WebApps.

L'arguement de type String passé à querySelectorAll doit suivre la syntaxe CSS. Voir document.querySelector pour un exemple concret.

Souvenez vous que la valeur de retour est une NodeList, ça n'est donc pas recommandé d'utiliser des boucles for...in ni aucune méthode de tableau qui lèvera une exception. Si utiliser des méthodes de tableau est une nécessité alors la NodeList doit être convertie en tableau avant de l'utiliser..

Compatibilité avec les navigateurs

Specification

• Selectors API

Voir aussi

• querySelector()
• document.querySelectorAll
• document.querySelector
• Code snippets for querySelector