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