HTML DOM querySelectorAll() Method

Exemple

Définissez la couleur d'arrière - plan du premier élément avec class = « exemple » à l' intérieur d'un <div> élément:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Essayez vous - même »

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

Le querySelectorAll() méthode retourne une collection d'éléments enfants d'un élément correspondant à 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 de nœuds enfants qui correspond au sélecteur spécifié, vous pouvez boucle à travers tous les noeuds 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

element .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 descendants de l'élément courant qui correspond à un 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. Note: Lance une exception si le SYNTAX_ERR spécifié selector(s) est invalide

autres exemples

Exemple

Obtenir tous <p> éléments à l' intérieur d' un <div> élément, et définir la couleur d'arrière - plan du premier <p> élément (index 0) :

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Essayez vous - même »

Exemple

Obtenez tous les <p> éléments dans un <div> class = « exemple », et définir l'arrière - plan de la première <p> élément:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Essayez vous - même »

Exemple

Découvrez comment de nombreux éléments avec class = « exemple » il y a dans un <div> élément ( en utilisant la propriété de longueur de l'objet NodeList):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Essayez vous - même »

Exemple

Définissez la couleur d'arrière - plan de tous les éléments avec class = « exemple » dans un <div> élément:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
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 dans un <div> élément:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Essayez vous - même »

Exemple

Définir le style de bordure de tous <a> éléments dans un <div> élément qui ont une "target" attribut:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
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 tous <h2>, <div> et <span> éléments dans un <div> élément:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Essayez vous - même »