Ext.DomQuery.html
16.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<div class="body-wrap">
<div class="top-tools">
<a class="inner-link" href="#Ext.DomQuery-props"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-prop">Properties</a>
<a class="inner-link" href="#Ext.DomQuery-methods"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-method">Methods</a>
<a class="inner-link" href="#Ext.DomQuery-events"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-event">Events</a>
<a class="bookmark" href="../docs/?class=Ext.DomQuery"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-fav">Direct Link</a>
</div>
<h1>Class Ext.DomQuery</h1>
<table cellspacing="0">
<tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
<tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/core/DomQuery_wev8.js" target="_blank">DomQuery_wev8.js</a></td></tr>
<tr><td class="label">Class:</td><td class="hd-info">DomQuery</td></tr>
<tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
</table>
<div class="description">
*
Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
<p>
DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>
<p>
All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
</p>
<h4>Element Selectors:</h4>
<ul class="list">
<li> <b>*</b> any element</li>
<li> <b>E</b> an element with the tag E</li>
<li> <b>E F</b> All descendent elements of E that have the tag F</li>
<li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
<li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
<li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
</ul>
<h4>Attribute Selectors:</h4>
<p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
<ul class="list">
<li> <b>E[foo]</b> has an attribute "foo"</li>
<li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
<li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
<li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
<li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
<li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
<li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
</ul>
<h4>Pseudo Classes:</h4>
<ul class="list">
<li> <b>E:first-child</b> E is the first child of its parent</li>
<li> <b>E:last-child</b> E is the last child of its parent</li>
<li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>
<li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
<li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
<li> <b>E:only-child</b> E is the only child of its parent</li>
<li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>
<li> <b>E:first</b> the first E in the resultset</li>
<li> <b>E:last</b> the last E in the resultset</li>
<li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
<li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
<li> <b>E:even</b> shortcut for :nth-child(even)</li>
<li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
<li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
<li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
<li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
<li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
<li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
</ul>
<h4>CSS Value Selectors:</h4>
<ul class="list">
<li> <b>E{display=none}</b> css value "display" that equals "none"</li>
<li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
<li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
<li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
<li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
<li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
</ul><br><br><i>This class is a singleton and cannot be created directly.</i> </div>
<div class="hr"></div>
<a id="Ext.DomQuery-props"></a>
<h2>Public Properties</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Property</th>
<th class="msource-header">Defined By</th>
</tr>
<tr class="property-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-matchers"></a>
<b>matchers</b> : Object <div class="mdesc">
Collection of matching regular expressions and code snippets. </div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="property-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-operators"></a>
<b>operators</b> : Object <div class="mdesc">
<div class="short">Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
New operator...</div>
<div class="long">
Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, > <. </div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="property-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-pseudos"></a>
<b>pseudos</b> : Object <div class="mdesc">
<div class="short">Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
and the argument (if an...</div>
<div class="long">
Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
and the argument (if any) supplied in the selector. </div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
</table>
<a id="Ext.DomQuery-methods"></a>
<h2>Public Methods</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Method</th>
<th class="msource-header">Defined By</th>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-compile"></a>
<b>compile</b>( <code>String selector</code>, <span class="optional" title="Optional">[<code>String type</code>]</span> ) : Function <div class="mdesc">
<div class="short">Compiles a selector/xpath query into a reusable function. The returned function
takes one parameter "root" (optional)...</div>
<div class="long">
Compiles a selector/xpath query into a reusable function. The returned function
takes one parameter "root" (optional), which is the context node from where the query should start. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>selector</code> : String<div class="sub-desc">The selector/xpath query</div></li><li><code>type</code> : String<div class="sub-desc">(optional) Either "select" (the default) or "simple" for a simple selector match</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Function</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-filter"></a>
<b>filter</b>( <code>Array el</code>, <code>String selector</code>, <code>Boolean nonMatches</code> ) : Array <div class="mdesc">
<div class="short">Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)</div>
<div class="long">
Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child) <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Array<div class="sub-desc">An array of elements to filter</div></li><li><code>selector</code> : String<div class="sub-desc">The simple selector to test</div></li><li><code>nonMatches</code> : Boolean<div class="sub-desc">If true, it returns the elements that DON'T match
the selector instead of the ones that match</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Array</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-is"></a>
<b>is</b>( <code>String/HTMLElement/Array el</code>, <code>String selector</code> ) : Boolean <div class="mdesc">
<div class="short">Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)</div>
<div class="long">
Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child) <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : String/HTMLElement/Array<div class="sub-desc">An element id, element or array of elements</div></li><li><code>selector</code> : String<div class="sub-desc">The simple selector to test</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Boolean</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-select"></a>
<b>select</b>( <code>String selector</code>, <span class="optional" title="Optional">[<code>Node root</code>]</span> ) : Array <div class="mdesc">
<div class="short">Selects a group of elements.</div>
<div class="long">
Selects a group of elements. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>selector</code> : String<div class="sub-desc">The selector/xpath query (can be a comma separated list of selectors)</div></li><li><code>root</code> : Node<div class="sub-desc">(optional) The start of the query (defaults to document).</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Array</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-selectNode"></a>
<b>selectNode</b>( <code>String selector</code>, <span class="optional" title="Optional">[<code>Node root</code>]</span> ) : Element <div class="mdesc">
<div class="short">Selects a single element.</div>
<div class="long">
Selects a single element. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>selector</code> : String<div class="sub-desc">The selector/xpath query</div></li><li><code>root</code> : Node<div class="sub-desc">(optional) The start of the query (defaults to document).</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Element</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-selectNumber"></a>
<b>selectNumber</b>( <code>String selector</code>, <span class="optional" title="Optional">[<code>Node root</code>]</span>, <code>Number defaultValue</code> ) : Number <div class="mdesc">
<div class="short">Selects the value of a node, parsing integers and floats.</div>
<div class="long">
Selects the value of a node, parsing integers and floats. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>selector</code> : String<div class="sub-desc">The selector/xpath query</div></li><li><code>root</code> : Node<div class="sub-desc">(optional) The start of the query (defaults to document).</div></li><li><code>defaultValue</code> : Number<div class="sub-desc"></div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Number</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.DomQuery-selectValue"></a>
<b>selectValue</b>( <code>String selector</code>, <span class="optional" title="Optional">[<code>Node root</code>]</span>, <code>String defaultValue</code> ) : void <div class="mdesc">
<div class="short">Selects the value of a node, optionally replacing null with the defaultValue.</div>
<div class="long">
Selects the value of a node, optionally replacing null with the defaultValue. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>selector</code> : String<div class="sub-desc">The selector/xpath query</div></li><li><code>root</code> : Node<div class="sub-desc">(optional) The start of the query (defaults to document).</div></li><li><code>defaultValue</code> : String<div class="sub-desc"></div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">DomQuery</td>
</tr>
</table>
<a id="Ext.DomQuery-events"></a>
<h2>Public Events</h2>
<div class="no-members">This class has no public events.</div>
</div>