diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html')
| -rw-r--r-- | files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html | 158 |
1 files changed, 158 insertions, 0 deletions
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 +--- +<div>{{ApiRef("DOM")}}</div> + +<p>The {{domxref("ParentNode")}} mixin defines the <code><strong>querySelectorAll()</strong></code> method 返回一个 {{domxref("NodeList")}} 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。</p> + +<p>如果你只需要一个结果，可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。</p> + +<div class="note"> +<p><strong>Note:</strong> This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>一个或多个<a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS选择器</a>，这些选择器由逗号隔开。</dd> + <dd>A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> string; if it's not, a <code>SyntaxError</code> exception is thrown. See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> 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.</p> +</div> + +<h3 id="返回值">返回值</h3> + +<p>一个不存活的 {{domxref("NodeList")}} ，每个子节点拥有一个 {{domxref("Element")}} 对象，其中每个子节点至少与一个选择器相匹配。</p> + +<div class="note"> +<p><strong>Note:</strong> 如果指定的 <code>selectors</code> 包含<a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>，那么返回的列表始终为空。</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>The syntax of the specified <code>selectors</code> string is not valid.</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:</p> + +<pre class="brush: js notranslate">var matches = document.querySelectorAll("p");</pre> + +<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p> + +<pre class="brush: js notranslate">var matches = document.querySelectorAll("div.note, div.alert");</pre> + +<p>Here, we get a list of <code><p></code> elements whose immediate parent element is a {{domxref("div")}} with the class <code>"highlighted"</code> and which are located inside a container whose ID is <code>"test"</code>.</p> + +<pre class="brush: js notranslate">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>This example uses an <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named <code>"data-src"</code>:</p> + +<pre class="brush: js notranslate">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>Here, an attribute selector is used to return a list of the list items contained within a list whose ID is <code>"userlist"</code> which have a <code>"data-active"</code> attribute whose value is <code>"1"</code>:</p> + +<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active=1]");</pre> + +<h2 id="User_notes">User notes</h2> + +<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.</p> + +<h3 id="HTML">HTML</h3> + +<p>Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.</p> + +<pre class="brush: html notranslate"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>In this example, when selecting <code>".outer .inner"</code> in the context the <code><div></code> with the class <code>"select"</code>, the element with the class <code>".inner"</code> is still found, even though <code>.outer</code> is not a descendant of the base element on which the search is performed (<code>".select"</code>). By default, <code>querySelectorAll()</code> only verifies that the last element in the selector is within the search scope.</p> + +<p>The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:</p> + +<pre class="brush: js notranslate">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Living standard</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Original definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.ParentNode.querySelectorAll")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> + <li>This method is available as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</li> +</ul> |