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()