Sencha Inc. | HTML5 Apps

DomQuery v1.1 Basics

Published Aug 05, 2007 | Bernard Chhun | Tutorial | Easy
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, any version.

This tutorial will be your starting point in learning how to navigate through the DOM and getting anything you want with Ext's DomQuery singleton object.

DomQuery Basics

The DomQuery's select function takes 2 parameters. The first one is your selector string and the second one is a tag id in which your query will be made. I will use the Ext.query() function in this tutorial but keep in mind it is a shorthand for Ext.DomQuery.select()

Here is the html we're going to play with:

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/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">
   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>
</html>

Part 1: Element selectors

Let's assume I want to get all span tags within our document:

// this query will return an array of 2 element as it checks for all 
// span tags in the whole document.
Ext.query("span"); // [span.bar, span.bar]
// this query will return an array of 1 element because it will look in
// the tag that has the foo id.
Ext.query("span", "foo"); // [span.bar]

Notice how I just passed in a normal string as the first parameter.

To get tags by id, you need to add the "#" prefix:

// this query will return an array of 1 element containing our foo div!
Ext.query("#foo"); // [div#foo.bar]

To get tags by class name, you need to add the "." prefix:

/* this query will return an array of 1 element 
containing the second div */
Ext.query(".foo"); // [div#bar.foo]

You may also use the "*" keyword to get all elements:

// this will return an array of every element in the document.
Ext.query("*"); // [html, head, script firebug.js, link, 
                    body#ext-gen2.ext-gecko, script ext-base.js, 
                    script ext-core.js, div#bar.foo, span.bar, 
                    a www.extjs.com, div#foo.bar, p, span.bar, 
                    a test.html#]

To get children tags, we just need to insert a space between 2 selectors:

// this will return an array of 1 element. It will be the p tag within
// the div tag 
Ext.query("div p"); // [p]
// this will return an array of 2 element. It will be all span tags within 
// div tags
Ext.query("div span"); // [span.bar, span.bar]

There's 3 more element selectors, I will cover them in a future tutorial. For now , you may take a look at the DomQuery docs to start playing with them if what was discussed here is too easy for you :)

Part 2: Attributes selectors

These selectors will allow you to get some elements based on the value of its attributes. Attributes are properties you add to a html element such as href, id or class.

// let's check for the existence of any elements with a "class" attribute.
// this query will return an array of 5 elements. 
Ext.query("*[class]"); // [body#ext-gen2.ext-gecko, div#bar.foo, 
                           span.bar, div#foo.bar, span.bar]

Let's now do some specific searches on the class attributes.

// this will give all elements that has a class that equals "bar"
Ext.query("*[class=bar]"); // [span.bar, div#foo.bar, span.bar]
 
// this will give all elements that has a class that does not equal "bar"
Ext.query("*[class!=bar]"); // [html, head, script firebug.js, link,
                            //  body#ext-gen2.ext-gecko, script ext-base.js, 
                            //  script ext-core.js, div#bar.foo, 
                            //  a www.extjs.com, p, a test.html#]
 
// this will give all elements that has a class that starts with "b"
Ext.query("*[class^=b]"); // [span.bar, div#foo.bar, span.bar]
 
// this will give all elements that has a class that ends with "r"
Ext.query("*[class$=r]"); // [span.bar, div#foo.bar, span.bar]
 
// this will give all elements that has a class with the "a" substring
Ext.query("*[class*=a]"); // [span.bar, div#foo.bar, span.bar]

Part 3: CSS Value selectors

Those selectors will specifically look into a DOM element's style attribute.

Let's add some color into that html:

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/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'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;">
   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>
 </body>
</html>

We will now make queries based on the color CSS value, but it could be anything. Its structure is as follows:

element{attribute operator value}

Notice how I've inserted a different bracket here.

So, the operators are the same as the attribute selectors.

// get all red text element
Ext.query("*{color=red}"); // [div#bar.foo]
 
// get all pink colored element that is a child of a red colored element
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// get everything except for the red text element
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 www.extjs.com,
                                div#foo.bar, p, span.bar, a test.html#]
 
// get all element that has a color property starting with "yel"
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// get all element that has a color property ending with "ow"
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// get all element that has the "ow" substring
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]

Part 4: Pseudo Classes selectors

We are now going to fetch nodes using this improved web page based on what I did earlier. I merely added some styling in there plus an UL element, a TABLE element and a FORM element to make use of every pseudo classes selectors.

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/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; 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>
</html>

off we go:

/*
 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 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 us 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]

Conclusion

This tutorial was made using the API documentation. I merely wanted to show some real results based on an actual web page.

Share this post:
Leave a reply

Written by Bernard Chhun

4 Comments

Daniel Barajas

3 years ago

Here’s a few silly questions to get me going on this..

The base html has three references to JS files: firebug.js, ext-core.js, ext-base.js. However, I can only locate ‘ext-core.js’ within my extjs/builds directory. Do I perhaps have the wrong SDK or need to bring in more files? Also, how am I supposed to correctly reference the ‘firebug.js’?

Thanks for the help.

John Doe

3 years ago

John Doe

3 years ago

Actually, I’m not even sure if the link I gave is related. Sorry.

dallas

3 years ago

// get all element that has a color property starting with “yel”
Ext.query(”*”); // [a ]http://www.extjs.com]

// get all element that has a color property ending with “ow”
Ext.query(”*”); // [a ]http://www.extjs.com]

// get all element that has the “ow” substring
Ext.query(”*”); // [a http://www.extjs.com span.,bar]


they are all the same thing?

Leave a comment:

Commenting is not available in this channel entry.