Annotation of 2006/webapi/selectors-api/Overview.html, revision 1.93
1.1 avankest 1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2:
1.11 avankest 3: <html lang=en-US>
1.20 lhunt 4: <head><meta content="text/html;charset=UTF-8" http-equiv=Content-Type>
5:
1.1 avankest 6: <title>Selectors API</title>
7:
8: <style type="text/css">
1.36 lhunt 9: pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
1.50 lhunt 10: pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
1.20 lhunt 11:
1.36 lhunt 12: div.example { border-left:double; padding-left:1em }
13: dfn { font-style:normal; font-weight:bolder }
14: em.ct { font-style:normal; font-weight:normal; font-variant:small-caps }
15: p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
16: p.note:before { content:"Note: " }
17: .issue { padding:.5em; border:solid red }
18: .issue:before { content:"Issue: " }
19: code { color:#FF4500; }
20: code :link, code :visited { color:inherit }
21: </style>
1.79 lhunt 22: <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
1.29 lhunt 23: type="text/css">
1.1 avankest 24:
25: <body>
1.11 avankest 26: <div class=head>
1.31 lhunt 27: <p><a href="http://www.w3.org/"><img alt=W3C height=48
28: src="http://www.w3.org/Icons/w3c_home" width=72></a></p>
1.1 avankest 29:
1.46 lhunt 30: <h1 id=title>Selectors API</h1>
1.12 avankest 31: <!-- "DOM Selectors" was not acceptable. "DOM Level 4 Selectors" and
1.36 lhunt 32: conforming to the DOM specification template (if there is such a thing) is
33: just silly so we got stuck with this weird name. -->
1.12 avankest 34:
1.93 ! lhunt 35: <h2 class="no-num no-toc" id=W3C-doctype>W3C Working Draft 5 February 2009</h2>
1.1 avankest 36:
37: <dl>
1.5 avankest 38: <dt>This Version:
1.1 avankest 39:
1.11 avankest 40: <dd><a
1.93 ! lhunt 41: href="http://www.w3.org/TR/2009/ED-selectors-api-20090205/">http://www.w3.org/TR/2009/ED-selectors-api-20090205/</a>
1.1 avankest 42:
1.5 avankest 43: <dt>Latest Version:
1.1 avankest 44:
45: <dd><a
46: href="http://www.w3.org/TR/selectors-api/">http://www.w3.org/TR/selectors-api/</a>
47:
1.12 avankest 48: <dt>Previous Versions:
49:
50: <dd><a
1.44 lhunt 51: href="http://www.w3.org/TR/2007/WD-selectors-api-20071221/">http://www.w3.org/TR/2007/WD-selectors-api-20071221/</a>
52:
53: <dd><a
1.31 lhunt 54: href="http://www.w3.org/TR/2007/WD-selectors-api-20071019/">http://www.w3.org/TR/2007/WD-selectors-api-20071019/</a>
1.29 lhunt 55:
56: <dd><a
1.12 avankest 57: href="http://www.w3.org/TR/2006/WD-selectors-api-20060926/">http://www.w3.org/TR/2006/WD-selectors-api-20060926/</a>
1.1 avankest 58:
59: <dd><a
60: href="http://www.w3.org/TR/2006/WD-selectors-api-20060525/">http://www.w3.org/TR/2006/WD-selectors-api-20060525/</a>
61:
1.20 lhunt 62: <dt>Editors:
63:
1.46 lhunt 64: <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a> (<a
65: href="http://www.opera.com/">Opera Software ASA</a>) <<a
66: href="mailto:annevk@opera.com">annevk@opera.com</a>>
67:
1.29 lhunt 68: <dd><a href="http://lachy.id.au/">Lachlan Hunt</a> (<a
69: href="http://www.opera.com/">Opera Software ASA</a>) <<a
1.20 lhunt 70: href="mailto:lachlan.hunt@lachy.id.au">lachlan.hunt@lachy.id.au</a>>
1.1 avankest 71: </dl>
72:
1.11 avankest 73: <p class=copyright><a
1.1 avankest 74: href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
1.44 lhunt 75: © 2006-2007 <a href="http://www.w3.org/"><acronym title="World Wide Web
76: Consortium">W3C</acronym></a><sup>®</sup> (<a
1.31 lhunt 77: href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
78: of Technology">MIT</acronym></a>, <a
79: href="http://www.ercim.org/"><acronym title="European Research Consortium
80: for Informatics and Mathematics">ERCIM</acronym></a>, <a
81: href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
82: href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
83: <a
84: href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
85: and <a
86: href="http://www.w3.org/Consortium/Legal/copyright-documents">document
87: use</a> rules apply.</p>
1.33 lhunt 88: </div>
1.1 avankest 89:
90: <hr>
91:
1.11 avankest 92: <h2 class="no-num no-toc" id=abstract>Abstract</h2>
1.1 avankest 93:
1.23 lhunt 94: <p>Selectors, which are widely used in CSS, are patterns that match against
1.54 lhunt 95: elements in a tree structure <a href="#SELECT"
96: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a><a href="#CSS21"
1.69 lhunt 97: rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>. The Selectors API
1.54 lhunt 98: specification defines methods for retrieving <code>Element</code> nodes
99: from the <abbr title="Document Object Model">DOM</abbr> by matching
100: against a group of selectors. It is often desirable to perform DOM
101: operations on a specific set of elements in a document. These methods
102: simplify the process of acquiring specific elements, especially compared
103: with the more verbose techniques defined and used in the past.
1.1 avankest 104:
1.11 avankest 105: <h2 class="no-num no-toc" id=sotd>Status of this Document</h2>
1.1 avankest 106:
107: <p><em>This section describes the status of this document at the time of
108: its publication. Other documents may supersede this document. A list of
109: current W3C publications and the latest revision of this technical report
110: can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
111: index</a> at http://www.w3.org/TR/.</em>
112:
1.79 lhunt 113: <p>This is an Editor's Draft of "Selectors API". The W3C Membership and
114: other interested parties are invited to review the document and send
1.57 lhunt 115: comments to <a
116: href="mailto:public-webapps@w3.org">public-webapps@w3.org</a> (<a
117: href="http://lists.w3.org/Archives/Public/public-webapps/">public
1.79 lhunt 118: archive</a>) with <kbd>[selectors-api]</kbd> in the subject.</p>
119: <!--
120: <p>This is a Last Call Working Draft of "Selectors API". The W3C Membership
121: and other interested parties are invited to review the document and send
122: comments to <a href="mailto:public-webapps@w3.org">public-webapps@w3.org</a>
123: (<a href="http://lists.w3.org/Archives/Public/public-webapps/">public
124: archive</a>) with <kbd>[selectors-api]</kbd> in the subject, through 12
125: December 2008.</p>
126: -->
1.29 lhunt 127:
128: <p><span class=notetoeditor>Web content and browser developers are
129: encouraged to review this draft. This draft is considered relatively
130: stable and is expected to progress to Candidate Recommendation after the
1.44 lhunt 131: review period.</span> The editor’s copy of this specification is <a
1.30 lhunt 132: href="http://dev.w3.org/2006/webapi/selectors-api/">available in W3C
133: CVS</a>. A detailed list of changes is also available <a
1.1 avankest 134: href="http://dev.w3.org/cvsweb/2006/webapi/selectors-api/">from the CVS
1.29 lhunt 135: server</a>.
1.1 avankest 136:
1.29 lhunt 137: <p>This document was developed by the <a
1.57 lhunt 138: href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a>.
139: The Working Group expects to advance this Working Draft to Recommendation
1.29 lhunt 140: Status.
141:
142: <p>Publication as a Working Draft does not imply endorsement by the W3C
143: Membership. This is a draft document and may be updated, replaced or
144: obsoleted by other documents at any time. It is inappropriate to cite this
145: document as other than work in progress.
1.1 avankest 146:
147: <p>This document was produced by a group operating under the <a
148: href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
149: 2004 W3C Patent Policy</a>. W3C maintains a <a
1.77 lhunt 150: href="http://www.w3.org/2004/01/pp-impl/42538/status"
1.11 avankest 151: rel=disclosure>public list of any patent disclosures</a> made in
1.1 avankest 152: connection with the deliverables of the group; that page also includes
153: instructions for disclosing a patent. An individual who has actual
154: knowledge of a patent which the individual believes contains <a
155: href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
1.31 lhunt 156: Claim(s)</a> must disclose the information in accordance with <a
1.1 avankest 157: href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
158: 6 of the W3C Patent Policy</a>.
159:
1.11 avankest 160: <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
1.1 avankest 161: <!--begin-toc-->
162:
1.11 avankest 163: <ul class=toc>
1.87 lhunt 164: <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
1.11 avankest 165: <ul class=toc>
1.36 lhunt 166: <li><a href="#examples"><span class=secno>1.1 </span>Examples</a>
1.49 lhunt 167: </ul>
1.1 avankest 168:
1.87 lhunt 169: <li><a href="#conformance"><span class=secno>2 </span>Conformance
1.49 lhunt 170: Requirements</a>
171: <ul class=toc>
172: <li><a href="#terminology"><span class=secno>2.1 </span>Terminology and
173: Conventions</a>
174: </ul>
1.1 avankest 175:
1.87 lhunt 176: <li><a href="#interoperability"><span class=secno>3
1.49 lhunt 177: </span>Interoperability Considerations</a>
178: <ul class=toc>
179: <li><a href="#extensibility"><span class=secno>3.1
180: </span>Extensibility</a>
181: </ul>
182:
1.87 lhunt 183: <li><a href="#security"><span class=secno>4 </span>Security
1.49 lhunt 184: Considerations</a>
1.21 lhunt 185:
1.87 lhunt 186: <li><a href="#privacy"><span class=secno>5 </span>Privacy Considerations
1.49 lhunt 187: </a>
1.1 avankest 188:
1.87 lhunt 189: <li><a href="#nodeselector"><span class=secno>6 </span>The <code
1.55 lhunt 190: title="">NodeSelector</code> Interface</a>
1.16 avankest 191: <ul class=toc>
1.87 lhunt 192: <li><a href="#resolving-namespaces"><span class=secno>6.1
193: </span>Resolving Namespaces</a>
1.51 lhunt 194: </ul>
1.50 lhunt 195:
1.87 lhunt 196: <li><a href="#dom-feature-string"><span class=secno>7 </span>DOM Feature
1.64 lhunt 197: String</a>
198:
1.87 lhunt 199: <li><a href="#examples0"><span class=secno>8 </span>Examples</a>
1.64 lhunt 200:
1.11 avankest 201: <li class=no-num><a href="#references">References</a>
1.54 lhunt 202: <ul class=toc>
203: <li class=no-num><a href="#normative-references">Normative
204: references</a>
205:
1.84 lhunt 206: <li class=no-num><a href="#informative-references">Informative
207: references</a>
1.54 lhunt 208: </ul>
1.1 avankest 209:
1.11 avankest 210: <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
1.1 avankest 211: </ul>
212: <!--end-toc-->
213:
1.87 lhunt 214: <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
1.1 avankest 215:
216: <p><em>This section is non-normative.</em>
217:
1.20 lhunt 218: <p>This specification introduces two methods that take a group of selectors
1.24 lhunt 219: (often simply referred to as a selector) as an argument and return the
1.54 lhunt 220: matching elements <a href="#SELECT"
221: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>. With these methods, it is
222: easier to match a set of <code>Element</code> nodes based on specific
223: criteria. So instead of having to filter the result of a
224: <code>getElementsByTagName()</code> call, authors can directly
1.44 lhunt 225: “filter” in the query.
1.10 avankest 226:
1.36 lhunt 227: <h3 id=examples><span class=secno>1.1 </span>Examples</h3>
1.1 avankest 228:
229: <p><em>This section is non-normative.</em>
230:
1.54 lhunt 231: <p>Some ECMAScript <a href="#ECMA-262"
232: rel=biblioentry>[ECMA-262]<!--{{ECMA-262}}--></a> examples:
1.1 avankest 233:
1.14 avankest 234: <div class=example>
1.41 lhunt 235: <p>This is an example table written in HTML 4.01.</p>
1.22 lhunt 236:
1.20 lhunt 237: <pre><table id="score">
238: <thead>
239: <tr>
240: <th>Test
241: <th>Result
242: <tfoot>
243: <tr>
244: <th>Average
245: <td>82%
246: <tbody>
247: <tr>
248: <td>A
249: <td>87%
250: <tr>
251: <td>B
252: <td>78%
253: <tr>
254: <td>C
255: <td>81%
256: </table></pre>
257:
258: <p>In order to obtain the cells containing the results in the table, which
259: might be done, for example, to plot the values on a graph, there are at
260: least two approaches that may be taken. Using only the APIs from DOM
261: Level 2, it requires a script like the following that iterates through
262: each <code>tr</code> within each <code>tbody</code> in the
263: <code>table</code> to find the second cell of each row.</p>
264:
265: <pre>var table = document.getElementById("score");
1.23 lhunt 266: var groups = table.tBodies;
267: var rows = null;
1.24 lhunt 268: var cells = [];
1.20 lhunt 269:
1.23 lhunt 270: for (var i = 0; i < groups.length; i++) {
271: rows = groups[i].rows;
272: for (var j = 0; j < rows.length; j++) {
273: cells.push(rows[j].cells[1]);
1.20 lhunt 274: }
1.36 lhunt 275: }</pre>
1.20 lhunt 276:
1.46 lhunt 277: <p>Alternatively, using the <code
278: title=document-selectallelements>querySelectorAll()</code> method, that
279: script becomes much more concise.</p>
1.20 lhunt 280:
1.36 lhunt 281: <pre>var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");</pre>
1.41 lhunt 282:
1.84 lhunt 283: <p>Note that the script operates on the DOM and works independently from
284: the syntax used to create the document. Thus this script will also work
285: correctly for an equivalent table created from well-formed XHTML instead
286: of HTML, or dynamically created and inserted into a document using DOM
287: APIs.</p>
1.20 lhunt 288: </div>
289:
1.87 lhunt 290: <h2 id=conformance><span class=secno>2 </span>Conformance Requirements</h2>
1.1 avankest 291:
1.21 lhunt 292: <p>All diagrams, examples and notes in this specification are
1.20 lhunt 293: non-normative, as are all sections explicitly marked non-normative.
294: Everything else in this specification is normative.
1.1 avankest 295:
1.73 lhunt 296: <p>The key words <em class=ct>must</em>, <em class=ct>must not</em>, <em
297: class=ct>should</em>, <em class=ct>may</em> and <em
298: class=ct>recommended</em> in the normative parts of this document are to
299: be interpreted as described in RFC 2119 <a href="#RFC2119"
1.54 lhunt 300: rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>.
1.1 avankest 301:
1.11 avankest 302: <p>The following conformance classes are defined (and considered) by this
303: specification:
1.1 avankest 304:
305: <dl>
1.87 lhunt 306: <dt><dfn id=conforming-user-agent>conforming user agent</dfn>
1.1 avankest 307:
1.48 lhunt 308: <dd>A user agent that implements the <code><a
1.65 lhunt 309: href="#dom-document-selector">NodeSelector</a></code> interface described
310: in this specification and conforms to all <em class=ct>must</em>-level
311: criteria that apply to implementations.
1.22 lhunt 312:
1.87 lhunt 313: <dt><dfn id=conforming-application>conforming application</dfn>
1.22 lhunt 314:
315: <dd>An application that uses the interfaces defined in this specification
1.36 lhunt 316: and conforms to all <em class=ct>must</em>-level criteria that apply to
317: applications.
1.1 avankest 318: </dl>
319:
1.49 lhunt 320: <h3 id=terminology><span class=secno>2.1 </span>Terminology and Conventions</h3>
1.16 avankest 321:
1.54 lhunt 322: <p>The terminology used in this specification is that from Selectors <a
323: href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
1.16 avankest 324:
1.73 lhunt 325: <p>Conformance requirements phrased as algorithms or specific steps <em
326: class=ct>may</em> be implemented in any manner, so long as the end result
327: is equivalent.
1.16 avankest 328:
1.90 lhunt 329: <p>The IDL used in this specification uses the syntax defined in Web IDL <a
330: href="#WEBIDL" rel=biblioentry>[WEBIDL]<!--{{!WEBIDL}}--></a>.
331:
1.23 lhunt 332: <p>The construction "<code>Foo</code> object", where <code>Foo</code> is
333: actually an interface, is sometimes used instead of the more accurate
1.24 lhunt 334: "object implementing the <code>Foo</code> interface".
1.23 lhunt 335:
1.90 lhunt 336: <p>The interfaces used within, but not defined by, this specification,
337: including <code>Document</code>, <code>DocumentFragment</code>,
338: <code>Node</code> and <code>Element</code> are defined in DOM Level 3 Core
339: <a href="#DOM-LEVEL-3-CORE"
340: rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{!DOM-LEVEL-3-CORE}}--></a>.
1.46 lhunt 341:
1.87 lhunt 342: <h2 id=interoperability><span class=secno>3 </span>Interoperability
1.49 lhunt 343: Considerations</h2>
1.16 avankest 344:
1.23 lhunt 345: <p><em>This section is non-normative.</em>
346:
1.65 lhunt 347: <p>Some implementations might have different levels of support for
348: Selectors. If some implementations lack support for some selectors, then
1.87 lhunt 349: the use of such selectors will result in those implementations failing to
350: return the expected results. Authors are advised to check for the DOM
351: Exceptions thrown by these APIs and provide a fallback for graceful
352: degradation.
1.19 avankest 353:
1.49 lhunt 354: <h3 id=extensibility><span class=secno>3.1 </span>Extensibility</h3>
1.5 avankest 355:
356: <p><em>This section is non-normative.</em>
357:
358: <p>Extensions of the APIs defined in this specification are <em>strongly
1.36 lhunt 359: discouraged</em>. Implementors, Working Groups and other interested
360: parties should discuss extensions on a relevant public forum, such as <a
1.57 lhunt 361: href="mailto:public-webapps@w3.org">public-webapps@w3.org</a>.
1.5 avankest 362:
1.87 lhunt 363: <h2 id=security><span class=secno>4 </span>Security Considerations</h2>
1.11 avankest 364:
365: <p>It is expected that implementing this specification introduces no new
1.21 lhunt 366: security risks for users.
367:
1.62 lhunt 368: <p>If, at any time, the implementation detects a situation which would
1.73 lhunt 369: violate security policies, the implementation <em class=ct>may</em> abort
370: and raise a security exception. If any other error condition occurs which
371: is not covered directly by this or any other relevant specification, the
372: implementation <em class=ct>may</em> abort and raise an appropriate,
1.62 lhunt 373: language-binding-specific or implementation-specific exception.
374:
1.87 lhunt 375: <h2 id=privacy><span class=secno>5 </span>Privacy Considerations</h2>
1.11 avankest 376:
1.20 lhunt 377: <p>History theft is a potential privacy issue because the
1.54 lhunt 378: <code>:visited</code> pseudo-class in Selectors <a href="#SELECT"
379: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> allows authors to query
380: which links have been visited.
1.20 lhunt 381:
382: <p class=note>This is not a new problem, as it can already be exploited
383: using existing CSS and DOM APIs, such as <code>getComputedStyle()</code>
1.54 lhunt 384: <a href="#DOM-LEVEL-2-STYLE"
385: rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>.
1.20 lhunt 386:
387: <div class=example>
1.36 lhunt 388: <p>In this example, <var>vlinks</var> will acquire a list of links that
389: the user has visited. The author can then obtain the URIs and potentially
1.20 lhunt 390: exploit this knowledge.</p>
391:
1.27 lhunt 392: <pre>var vlinks = document.querySelectorAll(":visited");
1.20 lhunt 393: for (var i = 0; i < vlinks.length; i++) {
394: doSomethingEvil(vlinks[i].href);
395: }</pre>
396: </div>
397:
398: <p>As <a href="http://www.w3.org/TR/css3-selectors/#link">defined in
1.54 lhunt 399: <cite>Selectors</cite></a> (<a href="#SELECT"
400: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section 6.6.1), user
401: agents <em class=ct>may</em> treat all links as unvisited links. It is <em
1.47 lhunt 402: class=ct>recommended</em> that implementations behave consistently with
403: other uses of Selectors supported by the user agent.
1.11 avankest 404:
1.87 lhunt 405: <h2 id=nodeselector><span class=secno>6 </span>The <code
1.55 lhunt 406: title="">NodeSelector</code> Interface</h2>
1.16 avankest 407:
1.82 lhunt 408: <pre class=idl>module dom {
1.90 lhunt 409: [ImplementedOn=Document,ImplementedOn=DocumentFragment,ImplementedOn=Element,
410: NoInterfaceObject]
411: interface <dfn id=dom-document-selector>NodeSelector</dfn> {
1.82 lhunt 412: Element <a href="#queryselector" title=queryselector>querySelector</a>([Null=Empty, Undefined=Empty] in DOMString selectors);
413: NodeList <a href="#queryselectorall" title=queryselectorall>querySelectorAll</a>([Null=Empty, Undefined=Empty] in DOMString selectors);
414: };
415: };</pre>
1.36 lhunt 416:
417: <p>The term <dfn id=first>first</dfn> used in the definitions of the
1.92 lhunt 418: methods of the <code><a
419: href="#dom-document-selector">NodeSelector</a></code> interface means
1.87 lhunt 420: <em>first in document order</em>. The term <dfn id=document-order>document
1.92 lhunt 421: order</dfn> means a depth-first pre-order traversal of the document tree
422: or subtree in question. The term <dfn id=context-node>context node</dfn>
1.87 lhunt 423: refers to the node upon which the method was invoked. The term <dfn
1.91 lhunt 424: id=nodes-subtrees>node’s subtrees</dfn> refers to the collection of
1.88 lhunt 425: elements that are descendants of the <a href="#context-node">context
426: node</a>. The term <dfn id=matching-element-node>matching
427: <code>Element</code> node</dfn> refers to an <code>Element</code> node
428: that matches the group of selectors (<var>selectors</var>) that was passed
429: to the method, according to the rules for matching elements defined in
430: Selectors <a href="#SELECT"
431: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.</p>
1.74 lhunt 432: <!-- (Commented out until this definition, or something like it, is needed for
433: the proposed :scope pseudo-class.)
434:
435: <p>If the <span>context node</span> is a <code>Document</code> node, then
436: the <span>scope element</span> is the <code>documentElement</code> of
437: the given document. If the <span>context node</span> is an
438: <code>Element</code> node, then the <span>scope element</span> is the
439: same as the <span>context node</span>.</p>
440: -->
1.65 lhunt 441:
1.53 lhunt 442: <p>The <dfn id=queryselector
1.65 lhunt 443: title=queryselector><code>querySelector()</code></dfn> method on the
1.53 lhunt 444: <code><a href="#dom-document-selector">NodeSelector</a></code> interface
445: <em class=ct>must</em>, when invoked, return the first matching
1.91 lhunt 446: <code>Element</code> node within the node’s subtrees. If there is no
447: such node, the method <em class=ct>must</em> return <code>null</code>.
1.1 avankest 448:
1.53 lhunt 449: <p>The <dfn id=queryselectorall
1.65 lhunt 450: title=queryselectorall><code>querySelectorAll()</code></dfn> method on the
451: <code><a href="#dom-document-selector">NodeSelector</a></code> interface
452: <em class=ct>must</em>, when invoked, return a <code>NodeList</code>
453: containing all of the matching <code>Element</code> nodes within the
1.91 lhunt 454: node’s subtrees, in document order. If there are no such nodes, the
1.65 lhunt 455: method <em class=ct>must</em> return an empty <code>NodeList</code>.
1.53 lhunt 456:
457: <p>Both <code title=queryselector><a
458: href="#queryselector">querySelector()</a></code> and <code
459: title=queryselectorall><a
1.65 lhunt 460: href="#queryselectorall">querySelectorAll()</a></code> take a <a
461: href="http://www.w3.org/TR/css3-selectors/#grouping">group of
462: selectors</a> (<var>selectors</var>) as their argument (<a href="#SELECT"
1.86 lhunt 463: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section 5). This group of
464: selectors <em class=ct>should</em> match the <code>selectors_group</code>
465: production (<a href="#SELECT"
1.84 lhunt 466: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section 10) with the
467: additional provision that leading and trailing <a
468: href="http://www.w3.org/TR/css3-selectors/#whitespace"
469: title=Selectors>whitespace</a> (<a href="#SELECT"
470: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section 4) is permitted.
1.86 lhunt 471: This group of selectors <em class=ct>should not</em> use <a
1.87 lhunt 472: href="#namespace-prefix-needs-to-be-resolved"
473: title=need-to-resolve>namespace prefixes that need to be resolved</a>.
1.36 lhunt 474:
475: <p class=note>Authors are advised that while the use of pseudo-elements in
476: selectors is permitted, they will not match any elements in the document,
477: and thus would not result in any elements being returned. Therefore,
1.73 lhunt 478: authors are advised to avoid the use of pseudo-elements in selectors that
479: are passed to the methods defined in this specification.
1.36 lhunt 480:
1.50 lhunt 481: <p>The implementation <em class=ct>must</em> first trim any leading or
1.61 lhunt 482: trailing <a href="http://www.w3.org/TR/css3-selectors/#whitespace"
1.65 lhunt 483: title=Selectors>whitespace</a> from the value of the <var>selectors</var>
484: parameter. The implementation <em class=ct>must</em> then process the
485: value according to <a
1.61 lhunt 486: href="http://www.w3.org/TR/css3-selectors/#w3cselgrammar">the grammar of
487: Selectors</a> (<a href="#SELECT"
1.89 lhunt 488: rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section 10). Selectors are
489: evaluated against a given element in the context of the entire DOM tree in
490: which the element is located. If the given group of selectors is <a
1.54 lhunt 491: href="http://www.w3.org/TR/css3-selectors/#Conformance">invalid</a> (<a
492: href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, section
493: 13), the implementation <em class=ct>must</em> <a
1.25 lhunt 494: href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMException-SYNTAX_ERR">raise
1.54 lhunt 495: a <code>SYNTAX_ERR</code> exception</a> (<a href="#DOM-LEVEL-3-CORE"
496: rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{!DOM-LEVEL-3-CORE}}--></a>,
497: section 1.4).
1.20 lhunt 498:
1.50 lhunt 499: <p>If the user agent also supports some level of CSS, the implementation
500: <em class=ct>should</em> support the same set of selectors in both these
501: APIs and CSS.
1.1 avankest 502:
1.53 lhunt 503: <p>The <code>NodeList</code> object returned by the <code><a
1.65 lhunt 504: href="#queryselectorall">querySelectorAll()</a></code> method <em
1.53 lhunt 505: class=ct>must</em> be static, not <a
506: href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live"
1.54 lhunt 507: title="Document Object Model Core">live</a>. (<a href="#DOM-LEVEL-3-CORE"
508: rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{!DOM-LEVEL-3-CORE}}--></a>,
509: section 1.1.1) Subsequent changes to the structure of the underlying
510: document <em class=ct>must not</em> be reflected in the
511: <code>NodeList</code> object. This means that the object will instead
512: contain a list of matching <code>Element</code> nodes that were in the
513: document at the time the list was created.
1.1 avankest 514:
1.87 lhunt 515: <h3 id=resolving-namespaces><span class=secno>6.1 </span>Resolving
516: Namespaces</h3>
1.50 lhunt 517:
1.87 lhunt 518: <p>If the group of selectors include <a
519: href="#namespace-prefix-needs-to-be-resolved"
1.65 lhunt 520: title=need-to-resolve>namespace prefixes that need to be resolved</a>, the
1.73 lhunt 521: implementation <em class=ct>must</em> <a
1.68 lhunt 522: href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMException-NAMESPACE_ERR">raise
523: a <code>NAMESPACE_ERR</code> exception</a> (<a href="#DOM-LEVEL-3-CORE"
1.54 lhunt 524: rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{!DOM-LEVEL-3-CORE}}--></a>,
525: section 1.4).
1.50 lhunt 526:
1.86 lhunt 527: <p class=note>This specification does not provide support for resolving
528: arbitrary namespace prefixes. However, support for a namespace prefix
529: resolution mechanism may be considered for inclusion in a future version
530: of this specification.
531:
1.87 lhunt 532: <p>A <dfn id=namespace-prefix-needs-to-be-resolved
533: title=need-to-resolve>namespace prefix needs to be resolved</dfn> if the
534: namespace component is neither empty (e.g. <code>|div</code>),
535: representing the null namespace, or an asterisk (e.g. <code>*|div</code>),
536: representing any namespace. Since the asterisk or empty namespace prefix
537: do not need to be resolved, implementations that support the namespace
538: syntax in Selectors <em class=ct>must</em> support these. <a
539: href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>
1.60 lhunt 540:
541: <p class=note>Implementations that don't support the namespace syntax in
542: Selectors would instead throw a <code>SYNTAX_ERR</code> because it would
543: be treated as an invalid selector.
1.50 lhunt 544:
1.87 lhunt 545: <h2 id=dom-feature-string><span class=secno>7 </span>DOM Feature String</h2>
1.64 lhunt 546:
1.70 lhunt 547: <p>DOM3 Core defines several methods for checking for interface support, or
548: for obtaining implementations of interfaces, using <a
1.64 lhunt 549: href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures">feature
1.65 lhunt 550: strings</a>. (<a href="#DOM-LEVEL-3-CORE"
551: rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{!DOM-LEVEL-3-CORE}}--></a>,
1.70 lhunt 552: section 1.3.6) A DOM application can use these methods, each of which
553: accept <var>feature</var> and <var>version</var> parameters, using the
554: values "<code title="">Selectors-API</code>" and "<code>1.0</code>"
555: (respectively).
556:
557: <p>Conforming implementations <em class=ct>must</em> respond with a
558: <code>true</code> value when the <code>hasFeature</code> method is queried
559: with these values. Authors are cautioned, however, that implementations
560: returning <code>true</code> might not be perfectly compliant, and that
561: implementations returning <code>false</code> might well have support for
562: features in this specification; in general, therefore, use of this method
563: is discouraged.
1.64 lhunt 564:
1.87 lhunt 565: <h2 id=examples0><span class=secno>8 </span>Examples</h2>
1.64 lhunt 566:
1.22 lhunt 567: <div class=example>
1.72 lhunt 568: <p>The following examples make use of this sample XHTML document.</p>
1.20 lhunt 569:
1.72 lhunt 570: <pre><html xmlns="http://www.w3.org/1999/xhtml">
1.22 lhunt 571: <head>
572: <title>Selectors API Example</title>
573: </head>
574: <body>
1.72 lhunt 575: <div id="foo">
576: <p class="warning">This is a sample warning</p>
577: <p class="error">This is a sample error</p>
578: </div>
579: <div id="bar">
580: <p>...</p>
581: </div>
1.22 lhunt 582: </body>
1.36 lhunt 583: </html></pre>
1.20 lhunt 584:
1.65 lhunt 585: <p>The methods accept a group of selectors (comma separated) as the
586: argument. The following example would select all <code>p</code> elements
587: in the document that have a class of either "<code>error</code>" or
588: "<code>warning</code>".</p>
589:
590: <pre>var alerts = document.querySelectorAll("p.warning, p.error");</pre>
1.21 lhunt 591:
1.65 lhunt 592: <p>The <code title=document-selectelement>querySelector()</code> methods
593: also accept a group of selectors and they will return the first element
594: (if any) that matches any of the selectors in the group.</p>
595:
596: <pre>var x = document.querySelector("#foo, #bar");</pre>
597:
598: <p><var>x</var> would contain the first element in the document with an ID
1.72 lhunt 599: of either <code>foo</code> or <code>bar</code> (or both). In the sample
600: document above, it would select the <code>div</code> element with the ID
1.81 lhunt 601: of <code>foo</code> because it is first in document order. The order of
602: the selectors used in the parameter has no effect and would have the same
603: result if the order were reversed, as in:</p>
604:
605: <pre>var x = document.querySelector("#bar, #foo");</pre>
606:
607: <p>The methods can also be invoked on elements. In the following example,
608: assume the event handler is registered on an element, and thus the method
609: is invoked on the target element of the event.</p>
1.22 lhunt 610:
1.65 lhunt 611: <pre>function handle(evt) {
612: var x = evt.target.querySelector("span");
613: ...
614: // Do something with x
1.21 lhunt 615: }</pre>
1.14 avankest 616:
1.74 lhunt 617: <p>Even though the method is invoked on an element, selectors are still
618: evaluated in the context of the entire document. In the following
619: example, the method will still match the <code>div</code> element's child
620: <code>p</code> element, even though the <code>body</code> element is not
621: a descendant of the <code>div</code> element itself.</p>
622:
623: <pre>var div = document.getElementById("bar");
1.80 lhunt 624: var p = div.querySelector("body p");</pre>
1.74 lhunt 625:
1.72 lhunt 626: <p>Given this sample fragment that contains a list as a navigation menu:</p>
627:
628: <pre><ul class="nav">
629: <li><a href="/">Home</a></li>
630: <li><a href="/products">Products</a></li>
631: <li><a href="/about">About</a></li>
632: </ul></pre>
633:
634: <p>The following example selects all the <code>li</code> elements and
635: demonstrates how to iterate through the collection in a
1.43 lhunt 636: <code>NodeList</code>.</p>
1.21 lhunt 637:
1.41 lhunt 638: <pre>var lis = document.querySelectorAll("ul.nav>li");
1.24 lhunt 639: for (var i = 0; i < lis.length; i++) {
1.21 lhunt 640: process(lis.item(i));
641: }</pre>
642:
643: <p>In ECMAScript, the language binding also allows <code>NodeList</code>s
1.93 ! lhunt 644: to be addressed using the array notation, so that loop could be rewritten
! 645: like this:</p>
1.21 lhunt 646:
1.24 lhunt 647: <pre>for (var i = 0; i < lis.length; i++) {
1.21 lhunt 648: process(lis[i]);
649: }</pre>
650:
1.43 lhunt 651: <p>Since the <code>NodeList</code> objects returned by these methods are
1.22 lhunt 652: not live, changes to the DOM do not affect the content of the list.
1.21 lhunt 653: Consider the <code>process()</code> function called in the previous
654: examples is defined as follows:</p>
655:
1.36 lhunt 656: <pre>function process(elmt) {
1.21 lhunt 657: elmt.parentNode.removeChild(elmt);
658: }</pre>
659:
660: <p>This would cause each selected element to be removed from the DOM, but
1.43 lhunt 661: each element will remain in the <code>NodeList</code>. If the list were a
1.21 lhunt 662: live <code>NodeList</code>, removing an item from the DOM would also
663: remove the element from the list and adjust the indexes of subsequent
664: elements. That would have adverse effects upon the loop because not all
665: selected elements would be processed.</p>
1.87 lhunt 666:
667: <p>In documents comprising elements from multiple namespaces, it's
668: possible that some elements from different namespaces share the same
669: local name. Since this API does not natively support a namespace
670: resolution mechanism for selectors, obtaining a list of such elements
671: from a specific namespace, excluding all others, requires an additional
672: processing to filter the result. The following example illustrates a
673: document containing <code>video</code> elements from both the SVG and
674: XHTML namespaces.</p>
675:
676: <pre><svg id="svg1" xmlns="http://www.w3.org/2000/svg"
677: xmlns:xlink="http://www.w3.org/1999/xlink">
678: <video id="svgvideo1" xlink:href="myvideo.ogg" width="320" height="240"/>
679: <foreignObject width="100" height="100">
680: <video id="htmlvideo1" src="myvideo.ogg" xmlns="http://www.w3.org/1999/xhtml">No video1</video>
681: </foreignObject>
682: </svg></pre>
683:
684: <p>The following script demonstrates how to first select the
685: <code>video</code> elements and then filter out the unwanted elements
686: based on their namespace.</p>
687:
688: <pre>var list = document.querySelectorAll("svg video");
689: var result = new Array();
690: var svgns = "http://www.w3.org/2000/svg"
691:
692: for(var i = 0; i < elms.length; i++) {
693: if(elms[i].namespaceURI == svgns) {
694: result.push(elms[i]);
695: }
696: }</pre>
1.21 lhunt 697: </div>
698:
1.11 avankest 699: <h2 class=no-num id=references>References</h2>
1.1 avankest 700:
1.54 lhunt 701: <h3 class=no-num id=normative-references>Normative references</h3>
702: <!--begin-normative-->
703: <!-- Sorted by label -->
704:
705: <dl class=bibliography>
706: <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
707: <!---->
708:
709: <dt id=DOM-LEVEL-3-CORE>[DOM-LEVEL-3-CORE]
710:
1.88 lhunt 711: <dd>Gavin Nicol; et al. <a
1.54 lhunt 712: href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407"><cite>Document
713: Object Model (DOM) Level 3 Core Specification.</cite></a> 7 April 2004.
714: W3C Recommendation. URL: <a
715: href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407">http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407</a>
716: </dd>
717: <!---->
718:
719: <dt id=RFC2119>[RFC2119]
720:
721: <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
722: words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
723: RFC 2119. URL: <a
724: href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
725: </dd>
726: <!---->
727:
728: <dt id=SELECT>[SELECT]
729:
1.88 lhunt 730: <dd>Daniel Glazman; et al. <a
1.54 lhunt 731: href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215"><cite>Selectors.</cite></a>
732: 15 December 2005. W3C Working Draft. (Work in progress.) URL: <a
733: href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215">http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>
734: </dd>
735: <!---->
1.76 lhunt 736:
737: <dt id=WEBIDL>[WEBIDL]
738:
739: <dd>Cameron McCormack. <a
1.88 lhunt 740: href="http://www.w3.org/TR/2008/WD-WebIDL-20081219"><cite>Web
741: IDL.</cite></a> 19 December 2008. W3C Working Draft. (Work in progress.)
1.76 lhunt 742: URL: <a
1.88 lhunt 743: href="http://www.w3.org/TR/2008/WD-WebIDL-20081219">http://www.w3.org/TR/2008/WD-WebIDL-20081219</a>
1.76 lhunt 744: </dd>
745: <!---->
1.54 lhunt 746: </dl>
747: <!--end-normative-->
1.1 avankest 748:
1.84 lhunt 749: <h3 class=no-num id=informative-references>Informative references</h3>
1.54 lhunt 750: <!--begin-informative-->
751: <!-- Sorted by label -->
752:
753: <dl class=bibliography>
754: <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
755: <!---->
756:
1.69 lhunt 757: <dt id=CSS21>[CSS21]
758:
759: <dd>Bert Bos; et al. <a
760: href="http://www.w3.org/TR/2007/CR-CSS21-20070719"><cite>Cascading Style
761: Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 19 July
762: 2007. W3C Candidate Recommendation. (Work in progress.) URL: <a
763: href="http://www.w3.org/TR/2007/CR-CSS21-20070719">http://www.w3.org/TR/2007/CR-CSS21-20070719</a>
764: </dd>
765: <!---->
766:
1.54 lhunt 767: <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
768:
769: <dd>Vidur Apparao; Philippe Le Hégaret; Chris Wilson. <a
770: href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113"><cite>Document
771: Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
772: 2000. W3C Recommendation. URL: <a
773: href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113</a>
774: </dd>
775: <!---->
776:
777: <dt id=ECMA-262>[ECMA-262]
778:
779: <dd><a
780: href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"><cite>ECMAScript
781: Language Specification, Third Edition.</cite></a> December 1999. URL: <a
782: href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">http://www.ecma-international.org/publications/standards/Ecma-262.htm</a>
783: </dd>
784: <!---->
1.1 avankest 785: </dl>
1.54 lhunt 786: <!--end-informative-->
1.1 avankest 787:
1.11 avankest 788: <h2 class=no-num id=acknowledgements>Acknowledgements</h2>
1.1 avankest 789:
1.45 avankest 790: <p>The editors would like to thank to the following people who have
1.7 avankest 791: contributed to this specification (ordered on first name):
792:
1.84 lhunt 793: <p>Adam van den Hoven, Alan Gresley, Alex Russell, Björn Höhrmann, Boris
794: Zbarsky, Cameron McCormack, Charles McCathieNevile, Chris Wilson,
795: Christophe Jolif, Daniel Glazman, Daniel Schierbeck, Dave Massy, David
796: "liorean" Andersson, David Håsäther, Dean Jackson, Doug Schepers, Erik
797: Dahlström, Francois Remy, Garret Smith, Hallvord R. M. Steen, Ian
798: Hickson, Ivan Enderlin, Jean-Yves Bitterlich, Jim Ley, João Eiras, John
799: Resig, Jon Ferraiolo, Jonas Sicking, Jorgen Horstink, Karl Dubost,
800: Kartikaya Gupta, L. David Baron, Maciej Stachowiak, Magnus Kristiansen,
801: Martijn, Masataka Yakura, Mihai Sucan, Mohamed Zergaoui, Nicholas C.
802: Zakas, Nicolas Mendoza, Philip Taylor, Robert Sayre, Robin Berjon, Sander,
803: Sergey Ilinsky, Simon Pieters, Steven Pemberton, Tarquin Wilton-Jones,
804: Travis Leithead, and William J. Edney
1.1 avankest 805:
806: <p>Thanks to all those who have helped to improve this specification by
807: sending suggestions and corrections. (Please, keep bugging us with your
808: issues!)
Webmaster
![[BACK]](/https/dev.w3.org/cvsweb/icons/back.gif){kind=icon}
Return to Overview.html CVS log ![[TXT]](/https/dev.w3.org/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/https/dev.w3.org/cvsweb/icons/dir.gif){kind=icon}
Up to [Public] / 2006 / webapi / selectors-api