HTML DOM Element querySelectorAll() 方法

定义和用法

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

NodeList

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

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

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

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style 对象

教程：

CSS 语法

CSS 选择器

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

亲自试一试

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

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

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

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

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

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS 选择器参考手册。

技术细节

返回值：

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

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

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

更多实例

例子 2

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

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p"); 

// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

亲自试一试

例子 3

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

// 获取 id="myDIV" 的元素（div），然后在 div 中获取所有具有 class="example" 的 p 元素
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 

// 设置 div 中 class="example" 的第一个 <p> 元素 (index 0) 的背景颜色
x[0].style.backgroundColor = "red";

亲自试一试

例子 4

找出 <div> 元素中有多少带有 class="example" 的元素（使用 NodeList 对象的 length 属性）：

/* 获取 id="myDIV" 的元素（div），然后获取 div 内所有 class="example" 的 p 元素，返回找到的元素个数 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

亲自试一试

例子 5

设置 <div> 元素中 class="example" 的所有元素的背景颜色：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有 class="example" 的元素
var x = document.getElementById("myDIV").querySelectorAll(".example");

// 创建 for 循环并设置 div 中所有 class="example" 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

亲自试一试

例子 6

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

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p");

// 创建 for 循环并设置 div 中所有 p 元素的背景颜色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

亲自试一试

例子 7

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

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有具有 "target" 属性的 <a> 元素
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// 创建 for 循环并在 div 中设置所有带有 targe t属性的 <a> 元素的边框
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

亲自试一试

例子 8

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

// 获取 id="myDIV" 的元素（ div），然后获取 <div> 内的所有 <h2>、<div> 和 <span> 元素
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// 创建 for 循环并设置 <div> 中所有 <h2>、<div> 和 <span> 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该方法的浏览器版本。

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

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

相关页面

CSS 教程：CSS 选择器

CSS 参考手册：CSS 选择器参考手册

JavaScript 教程：JavaScript HTML DOM Node List

JavaScript 参考手册：element.querySelector()

HTML DOM 参考手册：document.querySelectorAll()