initial commit

1 files changed, 185 insertions, 0 deletions

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
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p>返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 {{domxref("NodeList")}} 。</p>
+
+<div class="note">
+<p>注意：此方法基于{{domxref("ParentNode")}} mixin的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>一个 {{domxref("DOMString")}} 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> 如果不是，会抛出一个 <code>SyntaxError</code> 错误。有关使用选择器标识元素的更多信息，请参阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 可以通过使用逗号分隔多个选择器来指定它们。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注意：</strong> 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅 {{anch("Escaping special characters")}}</p>
+</div>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个静态 {{domxref("NodeList")}}，包含一个与至少一个指定选择器匹配的元素的{{domxref("Element")}}对象，或者在没有匹配的情况下为空{{domxref("NodeList")}}</p>
+
+<div class="note">
+<p><strong>注意：</strong> 如果<code>selectors</code>参数中包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS伪元素</a>，则返回的列表始终为空。</p>
+</div>
+
+<h3 id="另外">另外</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>如果指定的 <code>选择器</code> 不合法，会抛出错误。如$("##div")</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="获取匹配列表">获取匹配列表</h3>
+
+<p>要获取文档中所有{{HTMLElement("p")}}元素的{{domxref("NodeList")}}。</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>此示例返回文档中所有{{HTMLElement("div")}}元素的列表，其中class包含"<code>note</code>"或"<code>alert</code>"：</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>在这里，我们得到一个<code>&lt;p&gt;</code>元素的列表，其直接父元素是一个class为<code>"highlighted"</code>的{{domxref("div")}}，并且位于ID为<code>"test"</code>的容器内。</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>此示例使用<a href="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>返回文档中属性名为<code>"data-src"</code>的{{domxref("iframe")}}元素列表：</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>这里，属性选择器用于返回ID为<code>"userlist"</code>的列表中包含值为<code>"1"</code>的<code>"data-active"</code>属性的元素</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="访问匹配项">访问匹配项</h3>
+
+<p>一旦返回匹配元素的{{domxref("NodeList")}}，就可以像任何数组一样检查它。 如果数组为空（即，其<code>length</code>属性为0），则找不到匹配项。</p>
+
+<p>否则，您只需使用标准数组方法来访问列表的内容。 您可以使用任何常见的循环语句，例如：</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="用户备注">用户备注</h2>
+
+<p><code>querySelectorAll()</code> 的行为与大多数常见的JavaScript DOM库不同，这可能会导致意外结果。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>考虑这个HTML及其三个嵌套的{{HTMLElement("div")}}块</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>在这个例子中，当在<code>&lt;div&gt;</code>上下文中选择带有<code>"select"</code>类的<code>".outer .inner"</code>时，仍然会找到类<code>".inner"</code>的元素，即使<code>.outer</code>不是基类的后代 执行搜索的元素（<code>".select"</code>）。 默认情况下，<code>querySelectorAll()</code>仅验证选择器中的最后一个元素是否在搜索范围内。</p>
+
+<p>{{cssxref(":scope")}} 伪类符合预期的行为，只匹配基本元素后代的选择器：</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <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>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<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/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>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/Document.querySelectorAll"} ) }}</p>