From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/document/queryselectorall/index.html | 185 +++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 files/zh-cn/web/api/document/queryselectorall/index.html (limited to 'files/zh-cn/web/api/document/queryselectorall') diff --git a/files/zh-cn/web/api/document/queryselectorall/index.html b/files/zh-cn/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..0e43d6020b --- /dev/null +++ b/files/zh-cn/web/api/document/queryselectorall/index.html @@ -0,0 +1,185 @@ +--- +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 +--- +
{{ ApiRef("DOM") }}
+ +

概述

+ +

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

+ +
+

注意：此方法基于{{domxref("ParentNode")}} mixin的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。

+
+ +

Syntax

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parameters

+ +
+
selectors
+
一个 {{domxref("DOMString")}} 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 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

+ +

考虑这个HTML及其三个嵌套的{{HTMLElement("div")}}块

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
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
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{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")}}

+
+ +

相关连接

+ + + +

{{ languages( { "en": "en/DOM/Document.querySelectorAll"} ) }}

-- cgit v1.2.3-54-g00ecf