Dojo 1.6 latest official Tutorial: How to Use dojo. query for Dom query and batch operations

 

In this lecture, we will learn about Dom queries and how to use dojo. query to conveniently find and operate DOM nodes.

 

Difficulty: Applicable dojo version for beginners: 1.6

By Bryan Forbes

Translator: feijia

Connection: http://dojotoolkit.org/documentation/tutorials/1.6/using_query/

 

Getting started

 

A key element of Dom programming is the ability to quickly and efficiently obtain the nodes you want to use. We have previously introduced how to use dojo. byid to find DOM nodes. However, the limitations of this method are also obvious. It is difficult for you to create a unique ID for each node on the page. byid always finds a single node. When you need to perform the same action on a group of nodes, dojo. byid is powerless. The solution to these limitations is the dojo. query that we will introduce today. The dojo. query method uses a method similar to CSS query to obtain a group of nodes. In the new version of dojo, it even supports advanced css3 selector.

 

Common Query

 

To demonstrate some of the most common Dom query examples, we assume the following HTML page segment (this is a common HTML segment that contains a series of links)

 <Ul id = "list"> <br/> <li class = "odd"> <br/> <Div class = "bold"> <br/> <a class = "odd"> odd </a> <br/> </div> <br/> </LI> <br/> <li class = "even"> <br/> <Div class = "italic"> <br/> <a class = "even"> even </a> <br/> </div> <br/> </ LI> <br/> <li class = "odd"> <br/> <a class = "odd"> odd </a> <br/> </LI> <br/> <li class = "even"> <br/> <Div class = "bold"> <br/> <a class = "even"> even </a> <br/> </div> <br/> </LI> <br/> <li class = "odd"> <br/> <Div class = "italic"> <br/> <a class = "odd"> odd </a> <br/> </div> <br/> </LI> <br/> <li class = "even"> <br/> <a class = "even"> even </a> <br/> </LI> <br/> </ul> </ p> <p> <ul id = "list2"> <br/> <li class = "odd"> odd <li> <br/> </ul>

 

 

For the preceding HTML snippets, the first operation is usually how to obtain a handle of the entire list. of course you can use dojo. byid, but dojo. query can also achieve the same purpose. although it looks like, you will think that here dojo. query is not that convenient, but you will find its advantages in combination with the following examples.

 

// Obtain all arrays containing nodes whose ID is "list" <br/> var list = dojo. Query ("# List") [0]; <br/>

 

By adding "#" to the parameter, we will tell dojo. query to find the "ID" attribute of the node. This is a syntax used for reference in CSS operations. Note that the return value of dojo. query is always an array. In this example, because there is only one node whose ID is "list", we directly retrieve the first element of the array.

 

The above shows how to get nodes by ID. dojo. query is not only capable of this. It also supports selecting nodes through class name. Suppose we want to get all nodes whose class name is equal to "odd:

// Retrieve an array of nodes with the class name "odd" <br/> var odds = dojo. Query (". Odd ");

 

 

By adding "." To the parameter, we tell dojo. query to match the classname attribute of the node, which also draws on the CSS syntax. In this example, dojo. query returns an array containing four <li> nodes and three <A> nodes.

 

Limits the scope of query Conditions

 

You may have discovered that the odds array obtained in the previous example contains nodes from both lists. Suppose we only need to get the odd node in the first list? There are two methods

// Use the selector to limit the query scope <br/> var odds1 = dojo. query ("# list. odd "); </P> <p> // use the second parameter to limit the query scope <br/> var odds2 = dojo. query (". odd ", dojo. byid ("list "));

 

 

The two methods return the same element. The first method uses the selector syntax, which limits the query result to the element whose ID is list, in the second method, a node is passed into the query as a restricted query parameter.

 

When the dojo. query method does not contain the second parameter, it searches for the entire DOM tree structure and traverses each node contained in the <HTML> label. If the method is called with a DOM node as the second parameter, this node is the scope of the query, and the query result must be the node or its subnodes.

 

 

If the DOM tree structure of your page is relatively small, such as the list example we use here, it is okay to omit the second parameter without affecting the efficiency too much. However, if the page is complex, we strongly recommend that you use dojo. query is to specify the second parameter to limit the scope of the query. this greatly reduces unnecessary search operations on the entire page to improve speed and performance.

 

For convenience, we will omit the second parameter in the following example, but please remember: In real applications, you should try to set the scope to make query operations fast and efficient.

 

More advanced queries

 

In the preceding example, The result set we query contains two types: <li> node and <A> node. If we only want <A> node, what should we do? In the dojo. query, we can combine the Tag Name and class name as the query condition:

 

VaR Odda = dojo. Query ("A. Odd ");

 

 

 

 

Dojo. query also supports another selector. ">". CSS ">" is not supported by all browsers, but can be used in Dojo. query.

With this selector, the query will

// Obtain any node A with a li node as its parent node <br/> var alla = dojo. query ("Li a"); <br/> // obtain any node A with a li node as its direct parent node <br/> var somea = dojo. query ("LI> ");

 

View examples

In our example, Alla queries 6 <A> nodes, while somea only contains 2 <A> nodes. You can use any other selector on both sides, including the class selector. Here we only introduce several of the most common selectors, but dojo. query is fully compatible with css3 and supports many other selectors.

You can learn more by yourself.

Nodelist (operate the result set returned by dojo. query)

 

As mentioned above, dojo. the query returns an array consisting of all nodes matching the query results. This array is actually a special array object called dojo. nodelist, the array object has a series of built-in methods to facilitate the operation of nodes.

 

Next, let's take a look at some of the common methods. In this section, we will use the following HTML code snippet:

<Div id = "list"> <br/> <Div class = "odd"> one </div> <br/> <Div class = "even"> two </ div> <br/> <Div class = "odd"> three </div> <br/> <Div class = "even"> four </div> <br/> <Div class = "odd"> five </div> <br/> <Div class = "even"> six </div> <br/> </div>

 

 

Dojo. nodelist has built-in auxiliary methods for dojo arrays. For example, foreach can execute a function for each element in the array:

Dojo. query (". odd "). foreach (function (node, index, nodelist) {<br/> // execute this method for each node in the array returned by the query <br/> dojo. addclass (node, "Red"); <br/> });

 

 

The foreach function is a callback function. The callback function supports three parameters: the node currently being operated, and the position number of the node in the array, and the result set being traversed (a dojo. nodelist object)

 

For most developers, the third parameter is generally not used. This parameter is used only when you need to operate other nodes in the result set in the callback function. the foreach method can also accept the second parameter as the scope of the callback function call)

 

Dojo. other built-in array auxiliary methods in nodelist include map, filter, every, and some. most methods return a dojo. nodelist object, so it is easy to concatenate and use. some and every are exceptions, and their return values are boolean values)

 

Dojo. nodelist also has built-in Dom operations. The previous example can be further simplified

 

// To all ". add the classname attribute "red" to the node of the odd "query condition <br/> dojo. query (". odd "). addclass ("red"); <br/> // to all ". add the classname attribute "blue" to the even "query condition node <br/> dojo. query (". even "). addclass ("blue ");

 

 

These Dom operation methods will be executed on each node in Dojo. nodelist. the return value returned by a colleague is still a dojo. nodelist, which can be used in tandem. For example:

 

// All ". delete the red attribute on the node where the odd "condition is located and add the blue attribute <br/> dojo. query (". odd "). removeclass ("red "). addclass ("blue"); <br/>

 

Other Dom operation methods of dojo. nodelist include style, toggleclass, replaceclass, place, and empty. All these methods return dojo. nodelist for concatenation.

 

 

// Set all ". the font color of the even "condition node is changed to" while ", and the classname" italic "is added to the node. <br/> dojo. query (". even "). style ("color", "White "). addclass ("italic ");

 

 

Event

Dojo. another important method provided on nodelist is connect, which is used to connect to DOM events. how to handle DOM events in Dojo will be discussed in detail in the next handout. Here we will explain how to use dojo. the Connect Method of nodelist.

 

Note that, although. it is convenient to use connect on nodelist, but it is not applicable to dojo. nodelist contains a large number of nodes. In this case, a technique called event delegation should be used. we will discuss this technique in future handouts.

 

<Button class = "hookup demobtn"> click me! </Button> <br/> <button class = "hookuptoo demobtn"> click me! </Button> <br/> <button class = "hookuptoo demobtn"> click me! </Button> <br/> <button class = "hookup demobtn"> click me! </Button> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> // wait until the DOM tree in the browser is fully loaded before executing the operation <br/> dojo. ready (function () {<br/> // connect to all ". the "onclick" event of the node with the hookup condition <br/> dojo. query (". hookup "). connect ("onclick", function () {<br/> alert ("This button is hooked up! "); <Br/>}); <br/> // Syntax of another connection event <br/> dojo. query (". hookuptoo "). onclick (function () {<br/> alert ("This button is hooked up too! "); <Br/>}); <br/> // --> </MCE: SCRIPT> <br/>

 

The above example demonstrates two methods to connect dojo. nodelist to a DOM event:

 

The general connect method. Specify the event name and callback function in the parameter.

A complete list of methods using a series of predefined onxxxx Methods

You can find

 

The second method is more concise, but the built-in onxxx method only contains standard DOM events. For some non-standard events such as domattrmodified, you can only use the first method.

 

Summary

Using dojo. query and dojo. nodelist to operate DOM nodes in batches is simple:

Use dojo. query the nodes you need to operate, and then use dojo. the built-in method of nodelist modifies these nodes. the following chapter further describes how to use dojo to add interactions to pages and how to use the event mechanism in Dojo.