Digging into Dojo and Selecting Dom Nodes

I’ve played around with Dojo in the past but my primary Javascript framework has always been either Prototype or MooTools. In both cases they have some really useful functions built into them. One of the best in MooTools is the $ function which has been extended to allow you to select pretty much anything in your HTML without having to do lots of nested loops. So for example if I have some HTML like this (because, of course, we shouldn’t use non-unique ids on HTML elements, should we):

<ul id="movies">
    <li class="sortme">
        <div class="movie">
            Gross Point Blank
        </div>
    </li>
    <li class="sortme">
        <div class="movie">
            Casino Royale
        </div>
    </li>
</ul>

Then I could use the following line to select all of the divs that have the CSS class “movie” applied to them:

var list = $('movies').getElements('div.movie');

But how do you do the same in Dojo? Well of course it’s simple, just need some different syntax. So for the same HTML as before, we would use dojo.query tool like this:

dojo.query("div.movie");

For more detail, check out the Book of Dojo chapter on selecting dom nodes with dojo.query