mozilla

Revision 99383 of Locating DOM elements using selectors

  • Revision slug: DOM/Locating_DOM_elements_using_selectors
  • Revision title: Locating DOM elements using selectors
  • Revision id: 99383
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 6 words removed

Revision Content

{{ fx_minversion_header("3") }}

The Selectors API provides methods that make it quick and easy to retrieve Element ndoes from the DOM by matching against a set of selectors.  This is much faster than past techniques, wherein it was necessary to, for example, use a loop in JavaScript code to locate the specific items you needed to find.

The NodeSelector interface

This specification adds two new methods to any objects implementing the Document, DocumentFragment, or Element interfaces:

querySelector
Returns the first matching Element node within the node's subtree. If no matching node is found, null is returned.
querySelectorAll
Returns a NodeList containing all matching Element nodes within the node's subtree, or an empty NodeList if no matches are found.

See also

Revision Source

<p>{{ fx_minversion_header("3") }}</p>
<p>The Selectors API provides methods that make it quick and easy to retrieve Element ndoes from the DOM by matching against a set of selectors.  This is much faster than past techniques, wherein it was necessary to, for example, use a loop in JavaScript code to locate the specific items you needed to find.</p>
<h2>The NodeSelector interface</h2>
<p>This specification adds two new methods to any objects implementing the <a class="internal" href="/en/DOM/document" title="En/DOM/Document"><code>Document</code></a>, <a class="internal" href="/En/DOM/DocumentFragment" title="En/DOM/DocumentFragment"><code>DocumentFragment</code></a>, or <a class="internal" href="/en/DOM/element" title="En/DOM/Element"><code>Element</code></a> interfaces:</p>
<dl><dt><code>querySelector</code></dt><dd>Returns the first matching <a class="internal" href="/en/DOM/element" title="En/DOM/Element"><code>Element</code></a> node within the node's subtree. If no matching node is found, <code>null</code> is returned.</dd> <dt><code>querySelectorAll</code></dt><dd>Returns a <a class="internal" href="/En/DOM/NodeList" title="En/DOM/NodeList"><code>NodeList</code></a> containing all matching <code>Element</code> nodes within the node's subtree, or an empty <code>NodeList</code> if no matches are found.</dd></dl>
<h2>See also</h2>
<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> <li><a class="internal" href="/En/DOM/Element.querySelector" title="En/DOM/Element.querySelector"><code>element.querySelector</code></a></li> <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" title="En/Code_snippets/QuerySelector">Code snippets for querySelector</a></code></li>
</ul>
Revert to this revision