Méthode querySelectorAll() du document du DOM HTML

Définition et utilisation

querySelectorAll() La méthode retourne tous les éléments correspondant au sélecteur CSS.

querySelectorAll() La méthode retourne un NodeList.

Si le sélecteur est invalide, alors querySelectorAll() La méthode peut lever SYNTAX_ERR Exception.

Instance

Exemple 1

Sélectionner tous les éléments avec la classe "example":

document.querySelectorAll(".example");

Essayez-le vous-même

Exemple 2

Ajouter une couleur de fond à la première balise <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Essayez-le vous-même

Exemple 3

Ajouter une couleur de fond à la première balise <p> class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Essayez-le vous-même

Exemple 4

Nombre d'éléments class="example":

let numb = document.querySelectorAll(".example").length;

Essayez-le vous-même

Exemple 5

Définir la couleur de fond de tous les éléments class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Exemple 6

Définir la couleur de fond de tous les éléments <p> :

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Exemple 7

Définir la bordure de tous les éléments <a> utilisant l'attribut "target" :

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Essayez-le vous-même

Exemple 8

Définir la couleur de fond de chaque élément <p> dont l'élément parent est <div> :

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Exemple 9

Définir la couleur de fond 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";
}

Essayez-le vous-même

Syntaxe

document.querySelectorAll(CSSselectors)

Paramètres

Paramètres Description
CSSselectors

Obligatoire. Un ou plusieurs sélecteurs CSS.

Les sélecteurs CSS sélectionnent les éléments HTML en fonction de l'ID, de la classe, du type, des attributs, de la valeur des attributs, etc.

Pour une liste complète, veuillez visiter notre Manuel de sélecteurs CSS.

Pour plusieurs sélecteurs, séparez chaque sélecteur par une virgule (voir l'exemple ci-dessus).

Valeur de retour

Type Description
Objet

Un objet NodeList contenant des éléments correspondant à un sélecteur CSS.

Si aucun élément correspondant n'est trouvé, un objet NodeList vide est retourné.

La différence entre HTMLCollection et NodeList

NodeList et HTMLcollection très similaires.

les deux sont des collections (listes) de nœuds (éléments) extraits du document, similaires à des tableaux. Les nœuds peuvent être accédés par leur index (indice). L'index commence à 0.

les deux ont length une propriété qui retourne la quantité d'éléments de la liste (ensemble).

HTMLCollection estl'élément de documentensemble.

Le NodeList estNœud de documentensemble des éléments, des nœuds d'attribut et des nœuds de texte).

Les éléments de l'HTMLCollection peuvent être accédés par leur nom, leur id ou leur numéro d'index.

Les éléments du NodeList ne peuvent être accédés que par leur numéro d'index.

L'HTMLCollection est toujoursen temps réelensemble.

Par exemple : si un élément <li> est ajouté à la liste du DOM, la liste de l'HTMLCollection change également.

Le NodeList est généralementStatiqueensemble.

Par exemple : si un élément <li> est ajouté à la liste du DOM, la liste du NodeList ne change pas.

getElementsByClassName() et getElementsByTagName() Les méthodes retournent toutes des HTMLCollection en temps réel.

querySelectorAll() La méthode retourne un NodeList statique.

childNodes L'attribut retourne un NodeList en temps réel.

Support du navigateur

document.querySelectorAll() C'est une caractéristique de DOM Level 3 (2004).

Tous les navigateurs le supportent :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages associées

Tutoriel :

Sélecteurs CSS

Manuel de sélecteurs CSS

Tutoriel de NodeList JavaScript

Méthode QuerySelector :

Méthode querySelector() de l'Element

Méthode querySelectorAll() de l'Element

Méthode querySelector() du Document

Méthode querySelectorAll() du Document

Méthode GetElement :

Méthode getElementById() du Document

Méthode getElementsByTagName() du Document

Méthode getElementsByClassName() du Document