Exemple
Obtenez tous les éléments du document avec class = « exemple »:
var x =
document.querySelectorAll(".example"); Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le querySelectorAll() méthode retourne tous les éléments du document qui correspond à un CSS spécifié selector(s) , comme un objet NodeList statique.
L'objet NodeList représente une collection de noeuds. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Astuce: Vous pouvez utiliser la longueur propriété de l'objet NodeList pour déterminer le nombre d'éléments correspondant au sélecteur spécifié, vous pouvez faire une boucle à travers tous les éléments et extraire les informations que vous voulez.
Pour plus d' informations sur CSS Selectors, visitez notre CSS Selectors Tutorial et notre CSS Selectors Référence .
Support du navigateur
Les chiffres du tableau indique la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Remarque: Internet Explorer 8 supporte les sélecteurs CSS2. IE9 et versions ultérieures ont aussi le support CSS3 ainsi.
Syntaxe
document.querySelectorAll( CSS selectors )Les valeurs des paramètres
| Paramètre | Type | La description |
|---|---|---|
| CSS selectors | String | Champs obligatoires. Indique un ou plusieurs sélecteurs CSS pour correspondre à l'élément. Ceux-ci sont utilisés pour sélectionner des éléments HTML en fonction de leur identité, les classes, les types, les attributs, les valeurs des attributs, etc. Pour plusieurs sélecteurs, chaque sélecteur séparer par une virgule. Astuce: Pour une liste de tous les sélecteurs CSS, consultez notre CSS Selectors Référence . |
Détails techniques
| DOM Version: | Niveau 1 Selectors document objet |
|---|---|
| Valeur de retour: | Un objet NodeList, représentant tous les éléments du document qui correspond au CSS spécifié selector(s) . Le NodeList est une collection statique, ce qui signifie que les changements dans les DOM n'a pas d'effet dans la collection. Lance une exception de SYNTAX_ERR si le selector(s) est invalide |
autres exemples
Exemple
Obtenez tous les <p> éléments du document, et définir la couleur d'arrière - plan de la première <p> élément (index 0) :
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; Essayez vous - même » Exemple
Obtenez tous les <p> éléments du document avec class = « exemple », et définir l'arrière - plan de la première <p> élément:
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; Essayez vous - même » Exemple
Découvrez comment de nombreux éléments avec class = « exemple » il y a dans le document (en utilisant la propriété de longueur de l'objet NodeList):
var x =
document.querySelectorAll(".example").length; Essayez vous - même » Exemple
Définissez la couleur d'arrière-plan de tous les éléments du document avec class = « exemple »:
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Essayez vous - même » Exemple
Définissez la couleur d'arrière - plan de tous les <p> éléments du document:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Essayez vous - même » Exemple
Définir la frontière de tous les <a> éléments du document qui ont une "target" attribut:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} Essayez vous - même » Exemple
Définissez la couleur d'arrière - plan de chaque <p> élément où le parent est un <div> élément:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Essayez vous - même » Exemple
Définissez la couleur d'arrière - plan de tous <h2>, <div> et <span> éléments du document:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Essayez vous - même » Pages associées
Tutoriel CSS: CSS Selectors
CSS Référence: CSS Selectors Référence
JavaScript Tutoriel: HTML JavaScript DOM liste Node
HTML DOM Référence: document. querySelector()
HTML DOM Référence: élément. querySelectorAll()