HTML DOM querySelectorAll() 方法
示例
设置 "myDiv" 中第一个带有类 "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" 中第一个带有类 "example" 的 <p> 元素的背景
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
自己试试 »
示例
"myDIV" 中有多少个带有类 "example" 的元素
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
自己试试 »
示例
设置 "myDIV" 中所有带有类 "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";
}
自己试试 »
示例
设置文档中所有带有 "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 |
