HTML DOM querySelectorAll() 方法
示例
设置 "myDiv" 中第一个 class="example" 元素的背景颜色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
自己动手试一试 »
更多“自己尝试”的例子见下文。
描述
querySelectorAll() 方法返回所有匹配 CSS 选择器的子元素。
querySelectorAll() 方法返回一个 NodeList。
如果选择器无效，querySelectorAll() 方法将抛出 SYNTAX_ERR 异常。
NodeList（节点列表）
NodeList 是一个类似数组的节点集合（列表）。
列表中的节点可以通过索引访问。索引从 0 开始。
length 属性 返回列表中节点的数量。
语法
element.querySelectorAll(CSS 选择器)
参数
| 参数 | 描述 |
| CSS 选择器 | 必需。 一个或多个 CSS 选择器。 CSS 选择器根据 ID、类、类型、属性、属性值等选择 HTML 元素。 有关完整列表，请参阅我们的 CSS 选择器参考。 对于多个选择器，请用逗号分隔每个选择器（参见“更多示例”）。 |
返回值
| 类型 | 描述 |
| NodeList（节点列表） | 匹配 CSS 选择器的后代元素的集合。 NodeList 是静态的（DOM 中的更改对集合没有影响）。 如果指定的选择器无效，则抛出 SYNTAX_ERR 异常。 |
更多示例
示例
设置 "myDIV" 中第一个 <p> 元素的背景颜色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
自己动手试一试 »
示例
设置 "myDIV" 中第一个 class="example" 的 <p> 元素的背景
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
自己动手试一试 »
示例
"myDIV" 中有多少个 class="example" 的元素
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
自己动手试一试 »
示例
设置 "myDIV" 中所有 class="example" 元素的背景
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己动手试一试 »
示例
设置 "myDIV" 中所有 <p> 元素的背景颜色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己动手试一试 »
示例
设置 "myDIV" 中所有具有 "target" 属性的 <a> 元素的边框样式
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
自己动手试一试 »
示例
设置文档中所有 <h3> 和 <span> 元素的背景颜色
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己动手试一试 »
浏览器支持
element.querySelectorAll() 是 DOM Level 3 (2004) 特性。
所有现代浏览器都完全支持它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
