HTML DOM querySelectorAll() 方法

HTML DOM Document对象

querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

返回的NodeList中的元素按照它们在源代码中出现的顺序进行排序。

返回的NodeList可以通过索引号访问。索引从0开始。

NodeList是一个静态集合，这意味着DOM中的更改对该集合无效。

使用NodeList的length属性来确定具有指定选择器的元素数量，然后可以遍历所有元素并提取所需的信息。

语法：

document.querySelectorAll(selectors)

document.querySelectorAll("div");

浏览器兼容性

表格中的数字指定了完全支持querySelectorAll()方法的第一个浏览器版本：

方法
querySelectorAll()	1	3.5	10	3.2	8

参数值

技术细节

更多实例

获取所有带有class="demo"的元素：

document.querySelectorAll(".demo");

此示例返回带有“ note”类的文档中所有<div>元素的列表：

document.querySelectorAll("div.note");

设置文档中所有<h1>，<p>和<div>元素的背景色：

document.querySelectorAll("h1, p, div");

相关参考

CSS教程：CSS选择器

CSS参考：CSS#id选择器

CSS Reference: CSS .class 选择器

DOM Document querySelector() 方法

DOM Document getElementsByClassName() 方法

DOM Document getElementsByTagName() 方法

HTML DOM Document对象