JavaScript Element querySelectorAll() 方法

querySelectorAll()方法返回与指定的CSS选择器匹配的元素的子元素的集合，作为静态NodeList对象。NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

提示：您可以使用NodeList对象的length属性来确定与指定选择器匹配的子节点数，然后您可以遍历所有节点并提取所需的信息。

有关CSS选择器的更多信息，请访问我们的CSS选择器教程和CSS选择器参考。

实例：

在<div>元素中使用class=“example”设置第一个元素的背景颜色：

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

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
querySelectorAll()	9.0+	4.0+	3.5+	3.2+	10.0+

注意： Internet Explorer 8支持CSS2选择器。IE9及更高版本也支持CSS3。

语法

element.querySelectorAll(CSS selectors)

参数值

参数	类型	描述
CSS selectors	String	需要。指定一个或多个与元素匹配的CSS选择器。这些用于根据ID元素，类，类型，属性，属性值等选择HTML元素。对于多个选择器，使用逗号分隔每个选择器。返回的元素取决于首先在文档中找到的元素（请参阅“更多示例”）。提示：有关所有CSS选择器的列表，请查看我们的CSS选择器参考。

技术细节

项目	描述
返回值：	NodeList对象，表示与指定的CSS选择器匹配的当前元素的所有后代元素。NodeList是一个静态集合，这意味着DOM中的更改对集合没有影响。注意：如果指定的选择器无效，则抛出SYNTAX_ERR异常
DOM版本	Core Level 1

更多例子

获取<div>元素内的所有<p>元素，并设置第一个<p>元素（索引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";

尝试一下

使用class =“example”获取<div>中的所有<p>元素，并设置第一个<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";

尝试一下

找出在<div>元素中使用class=“example”的元素数量（使用NodeList对象的length属性）：

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

尝试一下

在<div>元素中使用class =“example”设置所有元素的背景颜色：

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

尝试一下

设置<div>元素中所有<p>元素的背景颜色：

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

尝试一下

设置<div>元素中具有“target”属性的所有<a>元素的边框样式：

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

尝试一下

设置<div>元素中所有<h2>，<div>和<span>元素的背景颜色：

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

尝试一下

JavaScript Element querySelectorAll() 方法