Tutorial:DomQuery v1.1 Basics

From Learn About the Ext JavaScript Library

(Redirected from Tutorial:DomQuery Basics)

Jump to: navigation, search

Summary: The basics of DomQuery

Author: Bernard Chhun

Published: august 5th 2007

Ext Version: 1.1+ / 2.0+

Languages:

English

Chinese

Korean

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.

1 DomQuery Basics

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 every 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]