The dojo. query function provides a natural segue into general-purpose DOM manipulation and is based on CSS3 selectors. For example, you might use the following logic to query the DOM for any anchor tags and temporarily highlight the background to be yellow for a mouse-over event:
. onmouseout (function levt)
dojo.style(evt.target, (background ""});

The statement inside the dojo. addOnLoad block queries the DOM for any anchor tags using the "a" CSS3 selector and returns a collection of nodes as a specialised subclass of Array called dojo.NodeList. Each of the dojo.NodeList methods is then successively applied to the collection of nodes with the final result being returned so that it can be captured into a variable if desired.



The dojo.NodeList class provides a number of useful methods, such as addClass, removeClass, style and the various Array functions that you already have seen. For example, if you are seduced by the elegant dot notation that dojo.NodeList provides, you may find yourself with an expression like the following:

va! highlyManipula tedNodes = dojo. query ("di v > a") .addClass ("foo")
.onmouseover(function(evt) /' you ... 'Il)
.map(function(item) ( /' .. get *Il)
. filter (function (item) ( /' the 'Il)
.fo!Each(function(item) { /' idea ... 'Il);
It is especially noteworthy that the dojo.NodeList methods named after and triggered by DOM events, such as onmouseover or onblur, accept a single parameter that is a W3C standardised event object, so you are freed from the development and maintenance of yet another layer of subtle incompatibilities when developing a Web application. In fact, the next section investigates the very mechanism that makes this possible.