Element.querySelector

  • Revision slug: Web/API/Element.querySelector
  • Revision title: Element.querySelector
  • Revision id: 431495
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

Summary

Returns the first element that is a descendent of the element on which it is invoked that matches the specified group of selectors.

Syntax

element = baseElement.querySelector(selectors);
  • element and baseElement are {{domxref("element")}} objects.
  • selectors is a group of selectors to match on.

Example

In this example, the first style element which either has no type or has type text/css in the HTML document body is returned:

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

Notes

Returns null if no matches are found; otherwise, it returns the first matching element.

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

querySelector() was introduced in the WebApps API.

The string argument pass to querySelector must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete examples.

Browser compatibility

Browser Support Notes
Internet Explorer 8  
Firefox (Gecko) 3.5 (1.9.1)  
Opera 10  
Chrome 1  
Safari (webkit) 3.2 (525.3) webk.it/16587

Specification

  • {{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}
  • {{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}
  • {{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}

See also

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary">Summary</h2>
<p>Returns the first element that is a descendent of the element on which it is invoked that matches the specified group of selectors.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<var>element</var> = baseElement.querySelector(<em>selector</em>s);
</pre>
<ul>
  <li><code>element</code> and <code>baseElement</code> are {{domxref("element")}} objects.</li>
  <li><code>selectors</code> is a group of selectors to match on.</li>
</ul>
<h2 id="Example" name="Example">Example</h2>
<p>In this example, the first <code>style</code> element which either has no type or has type <code>text/css</code> in the HTML document body is returned:</p>
<pre class="brush:js">
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Returns <code>null</code> if no matches are found; otherwise, it returns the first matching element.</p>
<p>Throws a <code>SYNTAX_ERR</code>&nbsp;exception if the specified group of selectors is invalid.</p>
<p><span style="font-family: Courier New;"><span>querySelector()</span></span> was introduced in the WebApps API.</p>
<p>The string argument pass to <code>querySelector</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete examples.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Support</th>
      <th>Notes</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>8</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Firefox (Gecko)</td>
      <td><strong>3.5</strong> (1.9.1)</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>10</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Safari (webkit)</td>
      <td>3.2 (525.3)</td>
      <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li>
  <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li>
  <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li>
</ul>
<h2 id="See_also" name="See_also">See also</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>
Revert to this revision