Document HTML DOM querySelectorAll()
Exemple
Sélectionnez tous les éléments avec class="example":
document.querySelectorAll(".example");
Plus d'exemples ci-dessous.
Définition et utilisation
La querySelectorAll()
méthode renvoie tous les éléments qui correspondent à un ou plusieurs sélecteurs CSS.
La querySelectorAll()
méthode renvoie une NodeList .
La querySelectorAll()
méthode lève une exception SYNTAX_ERR si le ou les sélecteurs ne sont pas valides
Tutoriels :
Le tutoriel des sélecteurs CSS
La référence des sélecteurs CSS
Le didacticiel de la liste de nœuds JavaScript
Méthodes QuerySelector :
La méthode de l'élément querySelector()
La méthode de l'élément querySelectorAll()
La méthode document querySelector()
La méthode Document querySelectorAll()
Méthodes GetElement :
La méthode Document getElementById()
Liste de nœuds HTML DOM / HTMLCollection
Les différences entre une HTMLCollection et une NodeList
Une NodeList et une HTMLCollection sont toutes deux des collections de type tableau (listes) de nœuds (éléments) extraits d'un document. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Les deux objets ont une propriété length qui renvoie le nombre d'éléments dans la liste.
Une HTMLCollection est une collection dynamique : si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans la HTMLCollection changera également.
Une NodeList est une collection statique : Si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans NodeList ne changera pas.
Les méthodes getElementsByClassName()
et getElementsByTagName()
renvoient une HTMLCollection.
Les méthodes querySelector()
et querySelectorAll()
renvoient une NodeList.
Syntaxe
document.querySelectorAll(CSS selectors)
Paramètres
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valeur de retour
Taper | La description |
Objet | Une NodeList avec les éléments qui correspondent au(x) sélecteur(s) CSS. Si aucune correspondance n'est trouvée, null est retourné. |
Plus d'exemples
Ajoutez une couleur d'arrière-plan au premier élément <p> :
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Ajoutez une couleur d'arrière-plan au premier élément <p> avec class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Nombre d'éléments avec class="example":
let numb = document.querySelectorAll(".example").length;
Définissez la couleur d'arrière-plan de tous les éléments avec class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Définissez la couleur d'arrière-plan de tous les éléments <p> :
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Définissez la bordure de tous les éléments <a> avec un attribut "cible" :
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Définissez la couleur d'arrière-plan de chaque élément <p> dont le parent est un élément <div> :
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Définissez la couleur d'arrière-plan de tous les éléments <h3>, <div> et <span> :
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Prise en charge du navigateur
document.querySelectorAll()
est une fonctionnalité DOM niveau 3 (2004).
Il est entièrement pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |