Login Register

Things to Make and Do With Queries

dojo.query, like CSS3, can do very complex selecting. But first ... what can you do with the retrieved nodes?

dojo.query returns a standard DOM NodeList, which can be traversed with regular JavaScript array techniques. It has a .length property like any array, and you can loop through it with a for loop. But Dojo provides some more convenient methods:

Applying a Dojo Function to Each Element

Since dojo.query returns a NodeList object, you can feed the results into any NodeList method. Some popular Dojo methods can be tacked right onto a dojo.query. Take for example style() which applies a style to each element queried. The following turns the background color of each element in class disableAble to gray:

dojo.query(".disableAble").style("backgroundColor","gray");

Here is a complete list of Dojo methods that can be used in this manner.

  • indexOf()
  • lastIndexOf()
  • coords()
  • style()
  • styles()
  • addClass()
  • removeClass()
  • place()
  • connect()
  • orphan()
  • adopt()
  • addContent()

For Dojo 1.0: if you do a dojo.require("dojo.NodeList-fx"), the following methods will be added to the NodeList object (see API documentation for more information):

  • wipeIn()
  • wipeOut()
  • slideTo()
  • fadeIn()
  • fadeOut()
  • animateProperty()

More General Functions - forEach

New for 1.0forEach() applies a snippet of JavaScript to each node, as described in Functions Used Everywhere. This snippet can use the following "magic" variables:

  • item is the DOM node currently being examined
  • index is its position in the NodeList, starting from 0
  • arr is the entire array of nodes. You can use this to perform lookahead or look-behind. arr[index] === item is always true.

The following code disables all INPUT tags

dojo.query("input").forEach("item.disabled = true;");

This call style is supported by forEach(), map(), every(), and some(). dojo.filter() also supports it but the NodeList filter() method does not since it accepts a CSS string expression to filter by instead.

The above only works for Dojo 1.0, but in either 0.9 or 1.0 you can pass a function name or a function literal. The function must take at least one parameter, the first of which is the element being examined. (The rest of the parameters are ignored). So the following code is equivalent to the first example:

dojo.query("input").forEach(
    function(inputElement) {
        inputElement.disabled = true;
   }
);

Filter

filter() uses a JavaScript function to pare down a list of nodes. The function provided to filter must take a node as input (similar to forEach) and return true if the node is to be kept. It returns a nodeList, just like query. This is especially useful for element selections you cannot express in CSS selector language. For example, odd/even row coloring can be performed this way:

var nodeCount = 0;
dojo.query("tr").filter(
   function(thisRow) {
      return (nodeCount++) % 2 == 0;
   }
).style("backgroundColor",evenRowColor);

Note that, as we said before, NodelList filter cannot use the new 1.0 snippet syntax. You must pass in a function literal or function name.

Event Handlers

You can attach event handlers to all the nodes of a query. For example, to bind an onclick handler to all elements with the "deadLink" class:

dojo.query(".deadLink").onclick(function(evt){
    dojo.stopEvent(evt);
});

NodeList methods are chainable:

dojo.query(".deadLink").addClass("disabledLink").onclick(function(evt){
    dojo.stopEvent(evt);
});

The following are event handler binders available on a NodeList object (the object returned from a dojo.query() call -- see dojo.NodeList API documentation for more information):

  • onblur()
  • onclick()
  • onkeydown()
  • onkeypress()
  • onkeyup()
  • onmousedown()
  • onmouseenter()
  • onmouseleave()
  • onmousemove()
  • onmouseout()
  • onmouseover()
  • onmouseup()
'

Docs for the forEach function are incorrect

The docs for the forEach function are incorrect, at least for Dojo 1.0.2 and later. The 'arr' parameter should be 'array', as using a string parameter to the forEach function throws an exception if 'arr' is used instead of 'array'.

I'm not sure if 'arr' was correct in an earlier version of Dojo, so I won't change this page for now. Can anyone confirm this?

Thanks

Shane

NodeList.addContent

From the NodeList source:

summary:
add a node or some HTML as a string to every item in the list.
Returns the original list.
description:
a copy of the HTML content is added to each item in the
list, with an optional position argument. If no position
argument is provided, the content is appended to the end of
each item.
example: appends content to the end if the position is ommitted
dojo.query("h3 > p").addContent("hey there!");
example: add something to the front of each element that has a "thinger" property:
dojo.query("[thinger]").addContent("...", "first");
example: adds a header before each element of the list
dojo.query(".note").addContent("<h4>NOTE:</h4>", "before");
content:
the HTML in string format to add at position to every item
position:
One of:
"last"||"end" (default)
"first||"start"
"before"
"after"
or an integer offset in the childNodes property

Note: there's a bug in Dojo 1.0.0 that hangs Firefox in some cases. See NodeList.addContent() hangs

DOM methods

The methods listed here apply to NodeList - what about the equivalent methods that are available under Dojo directly? For example, dojo.addClass()? There is no discussion of these methods in this handbook or anywhere I have looked (except the API docs itself, and even there it is spartan), but it seems they form a foundation for the discussion on this page on how to work with DOM nodes.

can we select all grids in a page?

can we use dojo.query and select all the grids on a page?

i mean, can we query by the "dojo type" or "dijit widget type"?