Element.querySelectorAll()
返回一个静态(非动态,non-live)的 NodeList
,它包含所有元素的非动态节点,该元素来自与其匹配指定的 CSS 选择器组的元素。(基础元素本身不包括,即使它匹配。)
备注:
该 API 的定义已被移动到 ParentNode
接口。
语法
示例
dataset selector & attribute selectors
html
<section class="box" id="sect1">
<div class="funnel-chart-percent1">10.900%</div>
<div class="funnel-chart-percent2">3700.00%</div>
<div class="funnel-chart-percent3">0.00%</div>
</section>
js
// dataset selectors
const refs = [
...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`),
];
// attribute selectors
// const refs = [...document.querySelectorAll(`[class*="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
下面的例子返回了 HTML 文档中的 body
元素的所有 <p>
后代元素:
js
var matches = document.body.querySelectorAll("p");
下面的例子返回了 id 为 "test"
的元素的所有 class 属性为 "highlighted"
的所有 div 后代元素的 <p>
子元素:
js
var el = document.querySelector("#test");
var matches = el.querySelectorAll("div.highlighted > p");
下面的例子返回了 el 元素的后代元素中所有拥有 data-src
属性的 iframe
元素:
js
var matches = el.querySelectorAll("iframe[data-src]");
附注
如果指定的 CSS 选择器不合法,则会抛出一个SYNTAX_ERR
异常。
返回值是一个 NodeList
对象,所以不推荐使用 for...in 去遍历它 (会遍历出其他无关属性)
想要在它身上使用数组方法,必须先把它转换为真正的数组。
浏览器兼容性
BCD tables only load in the browser