目录

HTML DOM 文档 querySelectorAll()

❮上一节 ❮ 文档对象参考下一节❯

示例

选择 class="example" 的所有元素：

document.querySelectorAll(".example");

亲自试一试 »

下面有更多示例。

描述

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

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

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

教程：

CSS 选择器教程

CSS 选择器参考

JavaScript 节点列表教程

查询选择器方法：

元素 querySelector() 方法

元素 querySelectorAll() 方法

文档 querySelector() 方法

文档 querySelectorAll() 方法

获取元素方法：

文档 getElementById() 方法

文档 getElementsByTagName() 方法

文档 getElementsByClassName() 方法

节点列表

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

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

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

语法

document.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").

返回值

类型	描述
对象	A节点列表包含与 CSS 选择器匹配的元素的对象。如果未找到匹配项，则返回空 NodeList 对象。

更多示例

向第一个 <p> 元素添加背景颜色：

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

亲自试一试 »

使用 class="example" 将背景颜色添加到第一个 <p> 元素：

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

亲自试一试 »

class="example" 的元素数量：

let numb = document.querySelectorAll(".example").length;

亲自试一试 »

使用class="example"设置所有元素的背景颜色：

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

亲自试一试 »

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

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

亲自试一试 »

使用 "target" 属性设置所有 <a> 元素的边框：

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}

亲自试一试 »

设置父元素为 <div> 元素的每个 <p> 元素的背景颜色：

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

亲自试一试 »

设置所有 <h3> 和 <span> 元素的背景颜色：

const nodeList = document.querySelectorAll("h3, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

亲自试一试 »

浏览器支持

document.querySelectorAll()是 DOM Level 3 (2004) 功能。

所有现代浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11

❮上一节 ❮ 文档对象参考下一节❯