目录

HTML DOM querySelectorAll() 方法

❮上一节 ❮ 元素对象参考下一节❯

示例

使用 class="example" 设置第一个元素（"myDiv" 中）的背景颜色：

const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");

list[0].style.backgroundColor = "red";

亲自试一试 »

下面有更多 "亲自试一试" 示例。

描述

这个querySelectorAll()方法返回与 CSS 选择器匹配的所有子元素。

这个querySelectorAll()方法返回一个节点列表。

这个querySelectorAll()如果选择器无效，方法会抛出 SYNTAX_ERR 异常

教程：

CSS 选择器教程

CSS 选择器参考

JavaScript 节点列表教程

查询选择器方法：

元素 querySelector() 方法

元素 querySelectorAll() 方法

文档 querySelector() 方法

文档 querySelectorAll() 方法

获取元素方法：

文档 getElementById() 方法

文档 getElementsByTagName() 方法

文档 getElementsByClassName() 方法

节点列表

节点列表是一个类似数组的节点集合（列表）。

链表中的节点可以通过索引来访问。索引从 0 开始。

长度波珀蒂返回列表中的节点数。

语法

element.querySelectorAll( CSS selectors)

参数

Parameter	Description
CSS selectors	Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples").

返回值

类型	描述
节点列表	与 CSS 选择器匹配的后代元素的集合。 NodeList 是静态的（DOM 中的更改对集合没有影响）。如果指定的选择器无效，则引发 SYNTAX_ERR 异常。

更多示例

示例

设置"myDIV"中第一个<p>元素的背景颜色：

const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");

list[0].style.backgroundColor = "red";

亲自试一试 »

示例

使用 class="example" 设置 "myDIV" 中第一个 <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
Yes	Yes	Yes	Yes	Yes	11

❮上一节 ❮ 元素对象参考下一节❯