Element.querySelector

  • Revision slug: DOM/Element.querySelector
  • Revision title: Element.querySelector
  • Revision id: 96596
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 2 words added, 5 words removed

Revision Content

{{ DomRef() }}

{{ fx_minversion_header("3") }}

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

where

  • element and baseElement are 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.

Specification

See also

 

Revision Source

<p>{{ DomRef() }}</p>
<p>{{ fx_minversion_header("3") }}</p>
<h3 name="Summary">Summary</h3>
<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>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"><em>element</em> = baseElement.querySelector(<em>selector</em>s);
</pre>
<p>where</p>
<ul> <li><code>element</code> and <code>baseElement</code> are <a href="/en/DOM/element" title="en/DOM/element">element</a> objects.</li> <li><code>selectors</code> is a group of selectors to match on.</li>
</ul>
<h3 name="Example">Example</h3>
<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>
<h3 name="Notes">Notes</h3>
<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> 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>
<h3 name="Specification">Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
</ul><h3 name="See_also">See also</h3>
<ul> <li><a class="internal" href="/En/DOM/Element.querySelectorAll" title="En/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> <li><a class="internal" href="/En/DOM/Document.querySelector" title="en/DOM/document.querySelector"><code>document.querySelector</code></a></li> <li><a class="internal" href="/En/DOM/Document.querySelectorAll" title="en/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> <li><code><a href="En/Code_snippets/querySelector">Code snippets for querySelector</a></code></li>
</ul>
<p> </p>
Revert to this revision