此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element.querySelectorAll()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
返回一个静态(非动态,non-live)的NodeList,它包含所有元素的非动态节点,该元素来自与其匹配指定的 CSS 选择器组的元素。(基础元素本身不包括,即使它匹配。)
备注:该 API 的定义已被移动到ParentNode 接口。
In this article
语法
js
elementList = baseElement.querySelectorAll(selectors);其中
示例
>dataset selector & attribute selectors
html
<section> <div>10.900%</div> <div>3700.00%</div> <div>0.00%</div></section>js
// dataset selectorsconst 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 去遍历它 (会遍历出其他无关属性)
想要在它身上使用数组方法,必须先把它转换为真正的数组。