DOM Magic

Note: The Dojo Quick Start Guide posts – while still relevant – are a bit dated. Please visit for expert tutorials and API documentation to help you get up and running with Dojo.

A really nice tool Dojo provides is dojo.query. It’s a great way to parse all or portions of the Document Object Model (DOM) and access selections of nodes. It really deserves its own book. Each of the following sections will touch on how to use dojo.query more closely, though realizing its potential is as simple as seeing it used:

     // our dom is ready, get the node:
        .addClass("testClass") // adds class="testClass"
	.fadeOut({ delay:500 }).play(); // and fade it out after 500 ms

Add .testClass CSS definitions to set color:red; and your heading will get that style before fading out:

.testClass {

dojo.query returns an instance of a dojo.NodeList, a synthetic super-Array of domNodes. It supports most CSS3 selectors (so you can go really wild with its syntax), and execute code against the whole list of results. To demonstrate this, we’re going to need something more than a single heading, so add some content to our DOM:

<h1 id="testHeading">Dojo Skeleton Page</h1>
     <a class="link" href="#">First link</a>
     <a class="link" href="#">Second Link</a>    

     <p class="para">First paragraph</p>
     <p class="para">Second paragraph</p>
     <p class="para">Third paragraph</p>

And use a different query:

     // get each element with class="para"
	.fadeOut({ delay: 1000 }).play();

All three elements should turn red, and fade out after a second delay. The full list of things dojo.NodeList does is impressive, some of which we’ll touch on in later sections of this guide.

Most dojo.query chains have standalone functions to achieve the same goals. For instance: dojo.query(“#testHeading”).addClass(“testClass”); and dojo.addClass(“testHeading”,”testClass”) have identical results.
Series Navigation« First StepsEvents »

Learn more about how SitePen can be your partner

SitePen is a strategic consultancy committed to achieving technical objectives, solving critical business problems and helping our customers build web applications the right way, the first time.