--- title: Document.querySelectorAll slug: Web/API/Document/querySelectorAll tags: - API - CSS Selectors - DOM - Document - Finding Elements - Locating Elements - Method - Reference - Searching Elements - Selecting Elements - Selectors - querySelectorAll translation_of: Web/API/Document/querySelectorAll ---
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 {{domxref("NodeList")}} 。
注意:此方法基于{{domxref("ParentNode")}} mixin的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。
elementList = parentNode.querySelectorAll(selectors);
selectors
SyntaxError
错误。有关使用选择器标识元素的更多信息,请参阅 Locating DOM elements using selectors 可以通过使用逗号分隔多个选择器来指定它们。注意: 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义,因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息,请参阅 {{anch("Escaping special characters")}}
一个静态 {{domxref("NodeList")}},包含一个与至少一个指定选择器匹配的元素的{{domxref("Element")}}对象,或者在没有匹配的情况下为空{{domxref("NodeList")}}
注意: 如果selectors
参数中包含 CSS伪元素,则返回的列表始终为空。
SyntaxError
选择器
不合法,会抛出错误。如$("##div")要获取文档中所有{{HTMLElement("p")}}元素的{{domxref("NodeList")}}。
var matches = document.querySelectorAll("p");
此示例返回文档中所有{{HTMLElement("div")}}元素的列表,其中class包含"note
"或"alert
":
var matches = document.querySelectorAll("div.note, div.alert");
在这里,我们得到一个<p>
元素的列表,其直接父元素是一个class为"highlighted"
的{{domxref("div")}},并且位于ID为"test"
的容器内。
var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");
此示例使用属性选择器返回文档中属性名为"data-src"
的{{domxref("iframe")}}元素列表:
var matches = document.querySelectorAll("iframe[data-src]");
这里,属性选择器用于返回ID为"userlist"
的列表中包含值为"1"
的"data-active"
属性的元素
var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']");
一旦返回匹配元素的{{domxref("NodeList")}},就可以像任何数组一样检查它。 如果数组为空(即,其length
属性为0),则找不到匹配项。
否则,您只需使用标准数组方法来访问列表的内容。 您可以使用任何常见的循环语句,例如:
var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });
querySelectorAll()
的行为与大多数常见的JavaScript DOM库不同,这可能会导致意外结果。
考虑这个HTML及其三个嵌套的{{HTMLElement("div")}}块
<div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div>
var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner'); inner.length; // 1, not 0!
在这个例子中,当在<div>
上下文中选择带有"select"
类的".outer .inner"
时,仍然会找到类".inner"
的元素,即使.outer
不是基类的后代 执行搜索的元素(".select"
)。 默认情况下,querySelectorAll()
仅验证选择器中的最后一个元素是否在搜索范围内。
{{cssxref(":scope")}} 伪类符合预期的行为,只匹配基本元素后代的选择器:
var select = document.querySelector('.select'); var inner = select.querySelectorAll(':scope .outer .inner'); inner.length; // 0
Specification | Status | Comment |
---|---|---|
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("DOM WHATWG")}} | Living standard |
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("Selectors API Level 2")}} | No change |
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("DOM4")}} | Initial definition |
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Original definition |
{{Compat("api.Document.querySelectorAll")}}
querySelector()
{{ languages( { "en": "en/DOM/Document.querySelectorAll"} ) }}