Search DOM Tree using dojo.query

When working with DOM, it is always good for the developers to get access to the elements in the DOM tree by using the ID or any other handler. Using ID is the most common way of getting access to the specific element in the DOM structure. We have dom.byId method to get the element object. However, just using the exact ID to match the elements is difficult job for the developers and it takes more time for matching the each ID. Also this method has another drawback, it can not be used for getting the elements with the class names in their element tag.

Dojo offers dojo.query to search the elements in DOM structure. It is most advanced method compare to the traditional method dom.byId. The beauty of this method is that it allows us to search the DOM tree by passing the filtering criteria like element name, etc. in the method parameter. Lets look at the following code:

<%@ page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
	var dojoConfig = {
		baseUrl : "src",
		packages : [ {
			name : "dojo",
			location : "dojo"
		}, {
			name : "dijit",
			location : "dijit"
		}, {
			name : "dojox",
			location : "dojox"
		}, {
			name : "app",
			location : "app"
		}, ],
		parseOnLoad : true,
		async : true
	};
</script>
<script src="src/dojo/dojo.js"></script>
<script>
	require([ "dojo/query",
	          "dojo/domReady"],
			function(query) {
				//1. Matching with ID testDiv1 (everything in the dom)
				var val1 = query("#testDiv1");

				//2. Matching with all the class one (everything in the dom)
				var val2 = query(".one");

				//3. Searches for class one inside id testDiv2.
				//But searches the entire dom to find the element
				var val3 = query("#testDiv1 .one");

				//4. Searches for class one inside id testDiv2.
				//Restricted to search only this ID.
				//Improves performance for larger DOM structure.
				var val4 = query(".one",document.getElementById("testDiv1"));

				//5. Search using the element name
				var val5 = query("a.one");
			});
</script>
</head>
<body>
	<div id="testDiv1">
		<div class="one">testDiv1::One</div>
		<div class="two">testDiv1::Two</div>
		<div class="three">testDiv1::Three</div>
		<div class="four">testDiv1::Four</div>
		<div class="five">testDiv1::Five</div>
		<div class="six"><a class="one">Link One</a></div>
	</div>
	<div id="testDiv2">
		<div class="one">testDiv2::One</div>
		<div class="two">testDiv2::Two</div>
		<div class="three">testDiv2::Three</div>
		<div class="four">testDiv2::Four</div>
		<div class="five">testDiv2::Five</div>
	</div>
</body>
</html>

I have written the explanation as numbered in the above example. I have given five different syntax for the query method and the explanations are provided below.

Matching the elements with the same ID as specified in the method. Note that query method always returns array of objects for the search operation. It returns the list of elements objects matching the same ID.
As I have mentioned above, the advantage of using dojo.query is to search the elements using its class name. In this example, dojo.query
method returns all the elements having the class name as “one”. Note that, it will return all the elements in the DOM tree.
query(“#testDiv1 .one”) tells the method to search for the element which has class name as “one” and that should be inside the parent element which contains the id “testDiv1”. To find this element, query method searches the entire DOM tree regardless of the any other restrictions. If the DOM tree is very large, then this syntax would cause performance issues for searching the elements. The page response will be very slow if user operation triggers this method frequently. If the DOM tree is small, then this method is good for finding the elements.
query(“.one”,document.getElementById(“testDiv1”) does the same as above method. But, with improved performance. When you have the second parameter in the query method, it restricts the search operation. Which is booster for the performance if the DOM tree is bigger. When you have only one parameter, this method trying to search the entire tree and returns the results.
If you want to get the element straightaway by passing the element name, this method will work for you. You can use this syntax query(“a.one”) to query the element from the specific element type.

I hope this article have provided basic details on how to use the dojo.query to search the elements in DOM tree.

About Krishna Srinivasan

Reader Interactions

Leave a Reply Cancel reply