initial commit

1 files changed, 132 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/element/queryselector/index.html b/files/zh-cn/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..340fd3b9b1
--- /dev/null
+++ b/files/zh-cn/web/api/element/queryselector/index.html
@@ -0,0 +1,132 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+tags:
+  - Element.querySelector()
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>返回与指定的选择器组匹配的元素的后代的第一个元素。</div>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="brush:js"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<ul>
+ <li><code>element</code> 和 <code>baseElement</code> 是 {{domxref("element")}} 对象.</li>
+ <li><code>selectors</code> 是一个CSS选择器字符串( <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> )</li>
+</ul>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>一组用来匹配{{domxref("Element")}} <code>baseElement</code>后代元素的选择器<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。</p>
+
+<p>如果没有找到匹配项，返回值为null。</p>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>指定的选择器无效。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例子</h2>
+
+<p>我们来看几个例子。</p>
+
+<h3 id="查找一个具有特殊属性值的元素">查找一个具有特殊属性值的元素</h3>
+
+<p>在第一个例子中，会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的{{HTMLElement("style")}}元素:</p>
+
+<pre class="brush:js">let el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="整个层次结构有效">整个层次结构有效</h3>
+
+<p>下面的例子演示了在应用选择器时考虑整个文档的层次结构, 因此在定位匹配时仍然考虑指定的 <strong>baseElement</strong> 之外的级别。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h5&gt;Original content&lt;/h5&gt;
+  &lt;p&gt;
+    inside paragraph
+    &lt;span&gt;inside span&lt;/span&gt;
+    inside paragraph
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;h5&gt;Output&lt;/h5&gt;
+  &lt;div id="output"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush:js">var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>结果是像这样的:</p>
+
+<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p>
+
+<p>注意，尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素，选择器"<code>div span</code>"依旧匹配了其中的{{HTMLElement("span")}}元素。 </p>
+
+<h3 id="更多例子">更多例子</h3>
+
+<p> {{domxref("Document.querySelector()")}} 查看更多正确格式选择器的例子。</p>
+
+<h2 id="Notes" name="Notes">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Element.querySelector")}}</p>
+
+<h2 id="Specification" name="Specification">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>