Domquery Basics
The select function of domquery has two parameters. The first is the selector string, and the second is the tag ID to generate the query ). In this article, I am going to use the function "Ext. Query", but readers must remember that it is a shorthand for "Ext. domquery. Select.
This is the HTML to start:
<script type="text/javascript" src="../js/firebug/firebug.js"></script>
<body>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-core.js"></script>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
Part 1: SelectorAssume that I want to obtain all the "span" tags in the document:
// This query returns an array with two elements because all span tags of the entire document are selected for the query.
Ext. Query ("span ");
// This query returns an array of elements because the query takes the foo ID into account.
Ext. Query ("span", "foo ");Note how to pass in a common string as the first parameter.
To obtain tags by ID, you need to add the prefix:
// This query will return an array containing an element of our FOO Div!
Ext. Query ("# foo ");To obtain tags by class name, you need to add the prefix:
/* This query returns an array of elements,
Contains a div that is the same as in the previous example, but we use the class name to obtain */
Ext. Query (". foo ");You can also use the keyword "*" to retrieve all elements:
// This returns an array containing all elements of the document.
Ext. Query ("*");To obtain the sub-tag, we only need to insert a space between two delimiters:
// This will return an array of elements, containing the DIV tag of the P tag
Ext. Query ("Div P ");
// This will return an array with two elements, containing the DIV tag of the span tag
Ext. Query ("Div span ");There are also three element delimiters, which will be described later in the tutorial.""
If you think this is too simple, you can go to the domquery document and check it out. There may be a lot of GAINS :)
Part 2: Attributes selectorsThese delimiters allow you to get elements based on some attribute values. Attribute refers toHref,IDOrClass.
// We can check for any element with the class attribute.
// This query returns an array of five elements.
Ext. query ("* [Class]"); // The result is [body # ext-gen2.ext-gecko, div # bar. foo, span. bar, div # Foo. bar, span. bar]Now we can search for specific class attributes.
// This will get all elements whose class is equal to barPart 3: CSS value element Selector
Ext. Query ("* [class = bar]");
// This will get all elements whose class is not equal to bar
Ext. Query ("* [class! = Bar] ");
// This will get all elements of the class starting from the "B" Header
Ext. Query ("* [class ^ = B]");
// This will get all elements of the class ending with "R"
Ext. Query ("* [class $ = R]");
// This will get all elements that extract the "A" character from the class.
Ext. Query ("* [class * = A]");These delimiters matchStyleAttribute. Add some colors to the HTML:
<HTML>
<Head>
<SCRIPT type = "text/JavaScript" src = "../JS/firebug. js"> </SCRIPT>
</Head>
<Body>
<SCRIPT type = "text/JavaScript" src = "../EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "../EXT/ext-core.js"> </SCRIPT>
<Div id = "bar"Class= "Foo" style = "color: red;">
I am a div ==> my ID is bar, myClass: Foo
<SpanClass= "Bar" style = "color: pink;"> I'm a span within the DIV with a foo class </span>
<A href = "http://www.extjs.com" target = "_ blank" style = "color: yellow;"> An extjs link with a blank target! </A>
</Div>
<Div id = "foo" class = "bar" style = "color: fushia;">
My ID: Foo, my class: bar
<P> I'm a p tag within the foo Div </P>
<SpanClass= "Bar" style = "color: Brown;"> I'm a span within the DIV with a bar class </span>
<A href = "#" style = "color: green;"> An internal link </a>
</Div>
</Body>
</Html>We will not perform any queries based on the color value of this CSS, but it can be other content. Its format is as follows:
Element{Attribute operator Value}
Note how I insert a different bracket here.
Therefore, operators are the same as attribute selectors.
// Obtain the red Element
Ext. Query ("* {color = Red}"); // [Div # bar. Foo]
// Obtain all pink elements with red child elements
Ext. Query ("* {color = Red} * {color = pink}"); // [span. Bar]
// Obtain all elements that are not in red.
Ext. Query ("* {color! = Red} "); // [HTML, Head, script firebug. JS, Link, body # ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span. bar, A http://www.extjs.com/, div # Foo. bar, P, span. bar, A test.html #]
// Obtain all the elements whose color attributes start with "Yel ".
Ext. Query ("* {color ^ = Yel}"); // [A www.extjs.com]
// Obtain all elements whose color attributes end with "ow"
Ext. Query ("* {color $ = ow}"); // [A www.extjs.com]
// Obtain all elements whose color attributes contain the "ow" character.
Ext. Query ("* {color * = ow}"); // [A http://www.extjs.com/, span. Bar]Part 4: pseudo-class selector
It is still the webpage just now, but the difference is that a new ul element, a table element, and a form element are added, so that we can use different pseudo-class delimiters, to obtain the node.
<script type="text/javascript" src="../js/firebug/firebug.js"></script>
<body>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-core.js"></script>
<div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
I'm a div ==> my id: bar, my class: foo
<span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
</div>
<div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
<a href="#" style="color:green;">An internal link</a>
</div>
<div style="border:2px dotted pink; margin:5px; padding:5px;">
<ul>
<li>Some choice #1</li>
<li>Some choice #2</li>
<li>Some choice #3</li>
<li>Some choice #4 with a <a href="#">link</a></li>
</ul>
<table style="border:1px dotted black;">
<tr style="color:pink">
<td>1st row, 1st column</td>
<td>1st row, 2nd column</td>
</tr>
<tr style="color:brown">
<td colspan="2">2nd row, colspanned! </td>
</tr>
<tr>
<td>3rd row, 1st column</td>
<td>3rd row, 2nd column</td>
</tr>
</table>
</div>
<div style="border:2px dotted red; margin:5px; padding:5px;">
<form>
<input id="chked" type="checkbox" checked/><label for="chked">I'm checked</label>
<br /><br />
<input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label>
</form>
</div>
</body>
Off we go:
/*Summary
this one gives us the first SPAN child of its parent
*/
Ext.query("span:first-child"); // [span.bar]
/*
this one gives us the last A child of its parent
*/
Ext.query("a:last-child") // [a http://www.extjs.com/, a test.html#]
/*
this one gives us the second SPAN child of its parent
*/
Ext.query("span:nth-child(2)") // [span.bar]
/*
this one gives us ODD TR of its parents
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
/*
this one gives us even LI of its parents
*/
Ext.query("li:nth-child(even)") // [li, li]
/*
this one gives us A that are the only child of its parents
*/
Ext.query("a:only-child") // [a test.html#]
/*
this one gives us the checked INPUT
*/
Ext.query("input:checked") // [input#chked on]
/*
this one gives us the first TR
*/
Ext.query("tr:first") // [tr]
/*
this one gives us the last INPUT
*/
Ext.query("input:last") // [input#notChked on]
/*
this one gives us the 2nd TD
*/
Ext.query("td:nth(2)") // [td]
/*
this one gives us every DIV that has the "within" string
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
/*
this one gives us every DIV that doesn't have a FORM child
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
/*
This one gives use every DIV that has an A child
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
/*
this one gives us every TD that is followed by another TD.
obviously, the one that has a colspan property is ignored.
*/
Ext.query("td:next(td)") // [td, td]
/*
this one gives us every LABEL that is preceded by an INPUT
*/
Ext.query("label:prev(input)") //[label, label]API is still the most important source of information. This tutorial demonstrates some results with a real web page.
If you have already understood the domquery content of the API, you can skip this article and directly read the domquery advanced tutorial!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
