From 40edc745dfb5c152e12080748f9357b376e8dbe9 Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 18 May 2021 00:44:37 +0000 Subject: [CRON] sync translated content --- files/zh-cn/_redirects.txt | 3 + files/zh-cn/_wikihistory.json | 58 ++++---- files/zh-cn/orphaned/web/api/parentnode/index.html | 82 +++++++++++ .../web/api/parentnode/queryselector/index.html | 96 +++++++++++++ .../web/api/parentnode/queryselectorall/index.html | 158 +++++++++++++++++++++ files/zh-cn/web/api/parentnode/index.html | 81 ----------- .../web/api/parentnode/queryselector/index.html | 95 ------------- .../web/api/parentnode/queryselectorall/index.html | 157 -------------------- 8 files changed, 368 insertions(+), 362 deletions(-) create mode 100644 files/zh-cn/orphaned/web/api/parentnode/index.html create mode 100644 files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html create mode 100644 files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html delete mode 100644 files/zh-cn/web/api/parentnode/index.html delete mode 100644 files/zh-cn/web/api/parentnode/queryselector/index.html delete mode 100644 files/zh-cn/web/api/parentnode/queryselectorall/index.html (limited to 'files/zh-cn') diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index ceb9eba7b1..85ba082b2b 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1722,6 +1722,7 @@ /zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /zh-CN/docs/Web/API/Element/previousElementSibling /zh-CN/docs/Web/API/Notation /zh-CN/docs/orphaned/Web/API/Notation /zh-CN/docs/Web/API/OfflineAudioContext/complete /zh-CN/docs/Web/API/OfflineAudioContext/complete_event +/zh-CN/docs/Web/API/ParentNode /zh-CN/docs/orphaned/Web/API/ParentNode /zh-CN/docs/Web/API/ParentNode.childElementCount /zh-CN/docs/Web/API/Element/childElementCount /zh-CN/docs/Web/API/ParentNode.children /zh-CN/docs/orphaned/Web/API/ParentNode/children /zh-CN/docs/Web/API/ParentNode.firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild @@ -1732,6 +1733,8 @@ /zh-CN/docs/Web/API/ParentNode/firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild /zh-CN/docs/Web/API/ParentNode/lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild /zh-CN/docs/Web/API/ParentNode/prepend /zh-CN/docs/orphaned/Web/API/ParentNode/prepend +/zh-CN/docs/Web/API/ParentNode/querySelector /zh-CN/docs/orphaned/Web/API/ParentNode/querySelector +/zh-CN/docs/Web/API/ParentNode/querySelectorAll /zh-CN/docs/orphaned/Web/API/ParentNode/querySelectorAll /zh-CN/docs/Web/API/ParentNode/replaceChildren /zh-CN/docs/orphaned/Web/API/ParentNode/replaceChildren /zh-CN/docs/Web/API/Performance.now() /zh-CN/docs/Web/API/Performance/now /zh-CN/docs/Web/API/Performance/内存 /zh-CN/docs/Web/API/Performance/memory diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index c660a12326..7a655c3adb 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -18842,35 +18842,6 @@ "Wineki" ] }, - "Web/API/ParentNode": { - "modified": "2020-10-15T21:30:05.597Z", - "contributors": [ - "codingbylch", - "RainSlide", - "Aaron-Bird", - "_sollrei", - "xgqfrms-GitHub", - "AlexChao" - ] - }, - "Web/API/ParentNode/querySelector": { - "modified": "2020-10-15T22:11:37.961Z", - "contributors": [ - "czmecah", - "guoyi" - ] - }, - "Web/API/ParentNode/querySelectorAll": { - "modified": "2020-12-10T23:19:17.539Z", - "contributors": [ - "YawnS0", - "czmecah", - "RainSlide", - "hawtim", - "_sollrei", - "ZZES_REN" - ] - }, "Web/API/Path2D": { "modified": "2019-03-23T22:53:11.857Z", "contributors": [ @@ -50431,6 +50402,17 @@ "xiaoxingchi" ] }, + "orphaned/Web/API/ParentNode": { + "modified": "2020-10-15T21:30:05.597Z", + "contributors": [ + "codingbylch", + "RainSlide", + "Aaron-Bird", + "_sollrei", + "xgqfrms-GitHub", + "AlexChao" + ] + }, "orphaned/Web/API/ParentNode/append": { "modified": "2020-10-15T21:51:11.120Z", "contributors": [ @@ -50482,6 +50464,24 @@ "maicss" ] }, + "orphaned/Web/API/ParentNode/querySelector": { + "modified": "2020-10-15T22:11:37.961Z", + "contributors": [ + "czmecah", + "guoyi" + ] + }, + "orphaned/Web/API/ParentNode/querySelectorAll": { + "modified": "2020-12-10T23:19:17.539Z", + "contributors": [ + "YawnS0", + "czmecah", + "RainSlide", + "hawtim", + "_sollrei", + "ZZES_REN" + ] + }, "orphaned/Web/API/ParentNode/replaceChildren": { "modified": "2020-10-15T22:33:59.306Z", "contributors": [ diff --git a/files/zh-cn/orphaned/web/api/parentnode/index.html b/files/zh-cn/orphaned/web/api/parentnode/index.html new file mode 100644 index 0000000000..c6b9a42c69 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/parentnode/index.html @@ -0,0 +1,82 @@ +--- +title: ParentNode +slug: orphaned/Web/API/ParentNode +tags: + - API + - DOM + - Mixin + - Node + - 参考 + - 接口 + - 节点 +translation_of: Web/API/ParentNode +original_slug: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

ParentNode 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。

+ +

ParentNode 是一个原始接口，不能够创建这种类型的对象；它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。

+ +

属性

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
返回一个当前 ParentNode 所含有的后代数量。
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
返回一个包含 ParentNode 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象，忽略所有非元素子节点。
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
返回父节点的第一个 {{domxref("Element")}} 后代，没有时返回 null。
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
返回父节点的最后一个 {{domxref("Element")}} 后代，没有时返回 null。
+
+ +

方法

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
在父节点 ParentNode 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
在父节点 ParentNode 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。
+
{{domxref("ParentNode.querySelector()")}}
+
返回以当前元素为根元素，匹配给定选择器的第一个元素 {{domxref("Element")}}。
+
{{domxref("ParentNode.querySelectorAll()")}}
+
返回一个 {{domxref("NodeList")}}，表示以当前元素为根元素的匹配给定选择器组的元素列表。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

浏览器兼容性

+ + + +

{{Compat("api.ParentNode")}}

+ +

参见

+ + diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html new file mode 100644 index 0000000000..7623caa0ba --- /dev/null +++ b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html @@ -0,0 +1,96 @@ +--- +title: ParentNode.querySelector() +slug: orphaned/Web/API/ParentNode/querySelector +translation_of: Web/API/ParentNode/querySelector +original_slug: Web/API/ParentNode/querySelector +--- +

{{APIRef("DOM")}}{{Draft}}

+ +

{{DOMxRef("ParentNode")}} mixin 将 querySelector() 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素，这些选择器是调用该方法的对象的后代。

+ +

如果您需要与选择器列表匹配的所有元素，使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。

+ +
+

Note: 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.

+
+ +

语法

+ +
element = parentNode.querySelector(selectors);
+
+ +

参数

+ +
+
selectors
+
{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的compound selector list ；如果不是， 会抛出 SyntaxError 异常. 查阅 Locating DOM elements using selectors 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。
+
+ +
+

Note: 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。

+
+ +

返回值

+ +

第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器，如果没有找到这样的元素，返回 null 。

+ +
+

Note: 如果指定的选择器包含 CSS pseudo-element, 则返回值始终为 null.

+
+ +

Exceptions

+ +
+
SyntaxError
+
指定的 selectors 字符串语法无效。
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("Selectors API Level 2")}}No change
{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM4")}}Initial definition
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Original definition
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.querySelector")}}

+ +

See also

+ + diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html new file mode 100644 index 0000000000..10936dd5d2 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html @@ -0,0 +1,158 @@ +--- +title: ParentNode.querySelectorAll() +slug: orphaned/Web/API/ParentNode/querySelectorAll +tags: + - API + - DOM + - Document + - ParentNode + - 参考 + - 方法 + - 查找 + - 选择器 +translation_of: Web/API/ParentNode/querySelectorAll +original_slug: Web/API/ParentNode/querySelectorAll +--- +
{{ApiRef("DOM")}}
+ +

The {{domxref("ParentNode")}} mixin defines the querySelectorAll() method 返回一个 {{domxref("NodeList")}} 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。

+ +

如果你只需要一个结果，可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。

+ +
+

Note: This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}

+
+ +

语法

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

参数

+ +
+
selectors
+
一个或多个CSS选择器，这些选择器由逗号隔开。
+
A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid CSS selector string; if it's not, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.
+
+ +
+

Note: Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.

+
+ +

返回值

+ +

一个不存活的 {{domxref("NodeList")}} ，每个子节点拥有一个 {{domxref("Element")}} 对象，其中每个子节点至少与一个选择器相匹配。

+ +
+

Note: 如果指定的 selectors 包含CSS pseudo-element，那么返回的列表始终为空。

+
+ +

Exceptions

+ +
+
SyntaxError
+
The syntax of the specified selectors string is not valid.
+
+ +

例子

+ +

To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:

+ +
var matches = document.querySelectorAll("p");
+ +

这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+ +

Here, we get a list of <p> elements whose immediate parent element is a {{domxref("div")}} with the class "highlighted" and which are located inside a container whose ID is "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

This example uses an attribute selector to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Here, an attribute selector is used to return a list of the list items contained within a list whose ID is "userlist" which have a "data-active" attribute whose value is "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");
+ +

User notes

+ +

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.

+ +

HTML

+ +

Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.

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

In this example, when selecting ".outer .inner" in the context the <div> with the class "select", the element with the class ".inner" is still found, even though .outer is not a descendant of the base element on which the search is performed (".select"). By default, querySelectorAll() only verifies that the last element in the selector is within the search scope.

+ +

The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:

+ +
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.ParentNode.querySelectorAll")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/parentnode/index.html b/files/zh-cn/web/api/parentnode/index.html deleted file mode 100644 index 8248512594..0000000000 --- a/files/zh-cn/web/api/parentnode/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: ParentNode -slug: Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - 参考 - - 接口 - - 节点 -translation_of: Web/API/ParentNode ---- -
{{APIRef("DOM")}}
- -

ParentNode 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。

- -

ParentNode 是一个原始接口，不能够创建这种类型的对象；它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。

- -

属性

- -
-
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
-
返回一个当前 ParentNode 所含有的后代数量。
-
{{domxref("ParentNode.children")}} {{readonlyInline}}
-
返回一个包含 ParentNode 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象，忽略所有非元素子节点。
-
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
-
返回父节点的第一个 {{domxref("Element")}} 后代，没有时返回 null。
-
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
-
返回父节点的最后一个 {{domxref("Element")}} 后代，没有时返回 null。
-
- -

方法

- -
-
{{domxref("ParentNode.append()")}} {{experimental_inline}}
-
在父节点 ParentNode 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。
-
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
-
在父节点 ParentNode 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。
-
{{domxref("ParentNode.querySelector()")}}
-
返回以当前元素为根元素，匹配给定选择器的第一个元素 {{domxref("Element")}}。
-
{{domxref("ParentNode.querySelectorAll()")}}
-
返回一个 {{domxref("NodeList")}}，表示以当前元素为根元素的匹配给定选择器组的元素列表。
-
- -

规范

- - - - - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
- -

浏览器兼容性

- - - -

{{Compat("api.ParentNode")}}

- -

参见

- - diff --git a/files/zh-cn/web/api/parentnode/queryselector/index.html b/files/zh-cn/web/api/parentnode/queryselector/index.html deleted file mode 100644 index e5e994c845..0000000000 --- a/files/zh-cn/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: Web/API/ParentNode/querySelector -translation_of: Web/API/ParentNode/querySelector ---- -

{{APIRef("DOM")}}{{Draft}}

- -

{{DOMxRef("ParentNode")}} mixin 将 querySelector() 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素，这些选择器是调用该方法的对象的后代。

- -

如果您需要与选择器列表匹配的所有元素，使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。

- -
-

Note: 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.

-
- -

语法

- -
element = parentNode.querySelector(selectors);
-
- -

参数

- -
-
selectors
-
{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的compound selector list ；如果不是， 会抛出 SyntaxError 异常. 查阅 Locating DOM elements using selectors 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。
-
- -
-

Note: 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。

-
- -

返回值

- -

第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器，如果没有找到这样的元素，返回 null 。

- -
-

Note: 如果指定的选择器包含 CSS pseudo-element, 则返回值始终为 null.

-
- -

Exceptions

- -
-
SyntaxError
-
指定的 selectors 字符串语法无效。
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("Selectors API Level 2")}}No change
{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM4")}}Initial definition
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Original definition
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.querySelector")}}

- -

See also

- - diff --git a/files/zh-cn/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 2f7bc72f71..0000000000 --- a/files/zh-cn/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - ParentNode - - 参考 - - 方法 - - 查找 - - 选择器 -translation_of: Web/API/ParentNode/querySelectorAll ---- -
{{ApiRef("DOM")}}
- -

The {{domxref("ParentNode")}} mixin defines the querySelectorAll() method 返回一个 {{domxref("NodeList")}} 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。

- -

如果你只需要一个结果，可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。

- -
-

Note: This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}

-
- -

语法

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

参数

- -
-
selectors
-
一个或多个CSS选择器，这些选择器由逗号隔开。
-
A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid CSS selector string; if it's not, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.
-
- -
-

Note: Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.

-
- -

返回值

- -

一个不存活的 {{domxref("NodeList")}} ，每个子节点拥有一个 {{domxref("Element")}} 对象，其中每个子节点至少与一个选择器相匹配。

- -
-

Note: 如果指定的 selectors 包含CSS pseudo-element，那么返回的列表始终为空。

-
- -

Exceptions

- -
-
SyntaxError
-
The syntax of the specified selectors string is not valid.
-
- -

例子

- -

To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:

- -
var matches = document.querySelectorAll("p");
- -

这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:

- -
var matches = document.querySelectorAll("div.note, div.alert");
- -

Here, we get a list of <p> elements whose immediate parent element is a {{domxref("div")}} with the class "highlighted" and which are located inside a container whose ID is "test".

- -
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
- -

This example uses an attribute selector to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named "data-src":

- -
var matches = document.querySelectorAll("iframe[data-src]");
- -

Here, an attribute selector is used to return a list of the list items contained within a list whose ID is "userlist" which have a "data-active" attribute whose value is "1":

- -
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");
- -

User notes

- -

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.

- -

HTML

- -

Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.

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

In this example, when selecting ".outer .inner" in the context the <div> with the class "select", the element with the class ".inner" is still found, even though .outer is not a descendant of the base element on which the search is performed (".select"). By default, querySelectorAll() only verifies that the last element in the selector is within the search scope.

- -

The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:

- -
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.ParentNode.querySelectorAll")}}

- -

参见

- - -- cgit v1.2.3-54-g00ecf