Méthode querySelectorAll() de l'élément DOM HTML

定义和用法

querySelectorAll() 方法返回与指定 CSS 选择器匹配的元素的子元素的集合，以静态 NodeList 对象。

NodeList

NodeList 是类数组的节点集合（列表）。

列表中的节点可以通过索引（下标）访问。索引从 0 开始。

length 属性可返回列表中的节点数。

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

Objet Style HTML DOM

教程：

Syntaxe CSS

Sélecteurs CSS

Manuel de référence des sélecteurs CSS

实例

例子 1

设置 <div> 元素中 class="example" 的第一个元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 设置 div 中第一个 class="example" (index 0) 的元素的背景颜色
x[0].style.backgroundColor = "red";

Essayez-le vous-même

提示：页面下方提供更多实例。

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

必需。字符串。规定一个或多个 CSS 选择器来匹配元素。

CSS 选择器用于根据 id、类、类型、属性、属性值等选择 HTML 元素。

对于多个选择器，用逗号分隔每个选择器。

提示：有关所有 CSS 选择器的列表，请查看我们的 Manuel de référence des sélecteurs CSS。

技术细节

返回值：

NodeList 对象，表示与指定 CSS 选择器匹配的当前元素的所有后代元素。

NodeList 是静态的集合，这意味着 DOM 中的改变对集合没有影响。

Attention :如果指定的选择器无效，则抛出 SYNTAX_ERR 异常
DOM 版本： Selectors Level 1 Document Object

更多实例

例子 2

获取 <div> 元素内的所有 <p> 元素，并设置第一个 <p> 元素（索引 0）的背景颜色：

// Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments p à l'intérieur de div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

Essayez-le vous-même

例子 3

获取 <div> 中 class="example" 的所有 <p> 元素，并设置第一个 <p> 元素的背景：

// Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments p avec la classe "example" à l'intérieur de div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Définir la couleur de fond du premier élément <p> avec la classe "example" (index 0) à l'intérieur de div
x[0].style.backgroundColor = "red";

Essayez-le vous-même

Exemple 4

Trouver combien d'éléments avec la classe "example" il y a à l'intérieur de l'élément <div> (utiliser la propriété length du NodeList) :

/* Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments p avec la classe "example" à l'intérieur de div, retourner le nombre d'éléments trouvés */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Essayez-le vous-même

Exemple 5

Définir la couleur de fond de tous les éléments avec la classe "example" à l'intérieur de l'élément <div> :

// Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments avec la classe "example" à l'intérieur de div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Créer une boucle for et définir la couleur de fond de tous les éléments class="example" à l'intérieur de div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Exemple 6

Définir la couleur de fond de tous les éléments <p> à l'intérieur de l'élément <div> :

// Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments p à l'intérieur de div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Créer une boucle for et définir la couleur de fond de tous les éléments p à l'intérieur de div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Exemple 7

Définir le style de bordure des éléments <a> avec l'attribut target dans l'élément <div> :

// Obtenir l'élément (div) avec l'ID "myDIV", puis obtenir tous les éléments <a> avec l'attribut "target" à l'intérieur de div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Créez une boucle for et définissez la bordure de tous les éléments <a> avec l'attribut targe t dans div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Essayez-le vous-même

Exemple 8

Définissez la couleur de fond de tous les éléments <h2>, <div> et <span> dans le <div> :

// Obtenez l'élément avec l'id="myDIV" (div), puis obtenez tous les éléments <h2>, <div> et <span> à l'intérieur du <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Créez une boucle for et définissez la couleur de fond de tous les éléments <h2>, <div> et <span> dans <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette méthode pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

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

Pages associées

Tutoriel CSS :Sélecteurs CSS

Manuel de référence CSS :Manuel de référence des sélecteurs CSS

Tutoriel JavaScript :Liste de noeuds HTML DOM JavaScript

Manuel de référence JavaScript :element.querySelector()

Manuel de référence HTML DOM :document.querySelectorAll()