Compare Revisions

Locating DOM elements using selectors

Revision 237628:

Revision 237628 by Philip Chee on

Revision 99392:

Revision 99392 by Philip Chee on

Title:
Locating DOM elements using selectors
Locating DOM elements using selectors
Slug:
DOM/Locating_DOM_elements_using_selectors
DOM/Locating_DOM_elements_using_selectors
Tags:
DOM, "Firefox 3.5"
DOM, "Firefox 3.5"
Content:

Revision 237628
Revision 99392
nn7    <div>
8      {{ gecko_minversion_header("1.9.1") }}
9    </div>
n8      {{ gecko_minversion_header("1.9.1") }}n11      The Selectors API provides methods that make it quick and e
 >asy to retrieve <a class="internal" href="/en/DOM/element" title=
 >"En/DOM/Element"><code>Element</code></a> nodes from the DOM by m
 >atching 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 fi
 >nd.
n10    <p>n13    <h2 id="The_NodeSelector_interface">
11      The Selectors API provides methods that make it quick and e
>asy to retrieve <a class="internal" href="/en/DOM/element" title= 
>"En/DOM/Element"><code>Element</code></a> nodes from the DOM&nbsp 
>;by matching against a set of selectors.&nbsp; This is much faste 
>r than past techniques, wherein it was necessary to, for example, 
> use a loop in JavaScript code to locate the specific items you n 
>eeded to find. 
12    </p>
13    <h2>
n17      This specification adds two new methods to any objects impln17      This specification adds two new methods to any objects impl
>ementing the <a class="internal" href="/en/DOM/document" title="E>ementing the <a class="internal" href="/en/DOM/document" title="E
>n/DOM/Document"><code>Document</code></a>, <a class="internal" hr>n/DOM/Document"><code>Document</code></a>, <a class="internal" hr
>ef="/En/DOM/DocumentFragment" title="En/DOM/DocumentFragment"><co>ef="/en/DOM/DocumentFragment" title="En/DOM/DocumentFragment"><co
>de>DocumentFragment</code></a>, or <a class="internal" href="/en/>de>DocumentFragment</code></a>, or <a class="internal" href="/en/
>DOM/element" title="En/DOM/Element"><code>Element</code></a> inte>DOM/element" title="En/DOM/Element"><code>Element</code></a> inte
>rfaces:>rfaces:
n30        Returns a <a class="internal" href="/En/DOM/NodeList" titn30        Returns a <a class="internal" href="/en/DOM/NodeList" tit
>le="En/DOM/NodeList"><code>NodeList</code></a> containing all mat>le="En/DOM/NodeList"><code>NodeList</code></a> containing all mat
>ching <code>Element</code> nodes within the node's subtree, or an>ching <code>Element</code> nodes within the node's subtree, or an
> empty <code>NodeList</code> if no matches are found.> empty <code>NodeList</code> if no matches are found.
n34      <strong>Note:</strong> The <code><a class="internal" href="n34      <strong>Note:</strong> The <code><a class="internal" href="
>/En/DOM/NodeList" title="En/DOM/NodeList">NodeList</a></code> ret>/en/DOM/NodeList" title="En/DOM/NodeList">NodeList</a></code> ret
>urned by <code><a class="internal" href="/En/DOM/Element.querySel>urned by <code><a class="internal" href="/en/DOM/Element.querySel
>ectorAll" title="En/DOM/Element.querySelectorAll">querySelectorAl>ectorAll" title="En/DOM/Element.querySelectorAll">querySelectorAl
>l()</a></code>&nbsp;is not live.&nbsp; This is different from oth>l()</a></code> is not live. This is different from other DOM quer
>er DOM&nbsp;querying methods that return live node lists.>ying methods that return live node lists.
n37      You may find examples and details by reading the documentatn37      You may find examples and details by reading the documentat
>ion for the <a class="internal" href="/En/DOM/Element.querySelect>ion for the <a class="internal" href="/en/DOM/Element.querySelect
>or" title="En/DOM/Element.querySelector"><code>querySelector()</c>or" title="En/DOM/Element.querySelector"><code>querySelector()</c
>ode></a>&nbsp;and <a class="internal" href="/En/DOM/Element.query>ode></a> and <a class="internal" href="/en/DOM/Element.querySelec
>SelectorAll" title="En/DOM/Element.querySelectorAll"><code>queryS>torAll" title="En/DOM/Element.querySelectorAll"><code>querySelect
>electorAll()</code></a>&nbsp;methods, as well as in the article <>orAll()</code></a> methods, as well as in the article <a class="i
>a class="internal" href="/En/Code_snippets/QuerySelector" title=">nternal" href="/En/Code_snippets/QuerySelector" title="En/Code sn
>En/Code snippets/QuerySelector">Code snippets for querySelector</>ippets/QuerySelector">Code snippets for querySelector</a>.
>a>. 
n39    <h2>n39    <h2 id="Selectors">
n43      The selector methods accept one or more comma-separated seln43      The selector methods accept one or more comma-separated sel
>ectors to determine what element or elements should be returned.&>ectors to determine what element or elements should be returned. 
>nbsp; For example, to select all paragraph (<code>p</code>) eleme>For example, to select all paragraph (<code>p</code>) elements in
>nts in a document whose CSS&nbsp;class is either <code>warning</c> a document whose CSS class is either <code>warning</code> or <co
>ode> or <code>note</code>, you can do the following:>de>note</code>, you can do the following:
n49      You can also query by ID.&nbsp; For example:n49      You can also query by ID. For example:
n55      After executing the above code, <code>el</code> contains thn55      After executing the above code, <code>el</code> contains th
>e first element in the document whose ID&nbsp;is one of <code>mai>e first element in the document whose ID is one of <code>main</co
>n</code>, <code>basic</code>, or <code>exclamation</code>.>de>, <code>basic</code>, or <code>exclamation</code>.
n58      You may use any&nbsp;CSS selectors with the <code>querySelen58      You may use any CSS selectors with the <code>querySelector(
>ctor()</code>&nbsp;and <code>querySelectorAll()</code>&nbsp;metho>)</code> and <code>querySelectorAll()</code> methods.
>ds. 
n60    <h2>n60    <h2 id="See_also">
n68        <a class="internal" href="/En/DOM/Element.querySelector" n68        <a class="internal" href="/en/DOM/Element.querySelector" 
>title="En/DOM/Element.querySelector"><code>element.querySelector<>title="En/DOM/Element.querySelector"><code>element.querySelector<
>/code></a>>/code></a>
n71        <a class="internal" href="/En/DOM/Element.querySelectorAln71        <a class="internal" href="/en/DOM/Element.querySelectorAl
>l" title="En/DOM/element.querySelectorAll"><code>element.querySel>l" title="En/DOM/element.querySelectorAll"><code>element.querySel
>ectorAll</code></a>>ectorAll</code></a>
n74        <a class="internal" href="/En/DOM/Document.querySelector"n74        <a class="internal" href="/en/DOM/Document.querySelector"
> title="en/DOM/document.querySelector"><code>document.querySelect> title="en/DOM/document.querySelector"><code>document.querySelect
>or</code></a>>or</code></a>
n77        <a class="internal" href="/En/DOM/Document.querySelectorAn77        <a class="internal" href="/en/DOM/Document.querySelectorA
>ll" title="en/DOM/document.querySelectorAll"><code>document.query>ll" title="en/DOM/document.querySelectorAll"><code>document.query
>SelectorAll</code></a>>SelectorAll</code></a>
tt83    <div class="noinclude">
84      {{ languages({ "ja": "ja/DOM/Locating_DOM_elements_using_se
 >lectors" }) }}
85    </div>

Back to History