Méthode HTML DOM querySelectorAll()

Exemple

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

// 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";

Plus d'exemples "Essayez-le vous-même" ci-dessous.

Définition et utilisation

La méthode querySelectorAll() renvoie une collection d'éléments enfants d'un élément qui correspondent à un ou plusieurs sélecteurs CSS spécifiés, sous la forme d'un objet NodeList statique.

L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.

Astuce : vous pouvez utiliser la propriété length de l'objet NodeList pour déterminer le nombre de nœuds enfants qui correspondent au sélecteur spécifié, puis vous pouvez parcourir tous les nœuds et extraire les informations souhaitées.

Pour plus d'informations sur les sélecteurs CSS, consultez notre didacticiel sur les sélecteurs CSS et notre référence sur les sélecteurs CSS .

Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la méthode.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Remarque : Internet Explorer 8 prend en charge les sélecteurs CSS2. IE9 et les versions ultérieures prennent également en charge CSS3.

Syntaxe

element.querySelectorAll(CSS selectors)

Valeurs des paramètres

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Détails techniques

Version DOM :	Sélecteurs Niveau 1 Objet Document
Valeur de retour :	Un objet NodeList, représentant tous les éléments descendants de l'élément actuel qui correspond à un ou plusieurs sélecteurs CSS spécifiés. La NodeList est une collection statique, ce qui signifie que les modifications apportées au DOM n'ont AUCUN effet sur la collection. Remarque : Lève une exception SYNTAX_ERR si le ou les sélecteurs spécifiés ne sont pas valides

Plus d'exemples

Exemple

Obtenez tous les éléments <p> à l'intérieur d'un élément <div> et définissez la couleur d'arrière-plan du premier élément <p> (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";

Exemple

Obtenez tous les éléments <p> dans un <div> avec class="example", et définissez l'arrière-plan du premier élément <p> :

// 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";

Exemple

Découvrez combien d'éléments avec class="example" il y a dans un élément <div> (en utilisant la propriété length 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;

Exemple

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

// 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";
}

Exemple

Définissez la couleur d'arrière-plan de tous les éléments <p> dans un élément <div> :

// 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";
}

Exemple

Définissez le style de bordure de tous les éléments <a> dans un élément <div> qui ont un attribut "cible" :

// 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";
}

Exemple

Définissez la couleur d'arrière-plan de tous les éléments <h2>, <div> et <span> dans un élément <div> :

// 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";
}