A Comprehensive Approach to Dojo: Learn the Basics of DOM

The existence of Dojo toolkit or Dojo framework has enabled the web application developers who have strong skills of Java programming but limited experience in JavaScript to put their life in web application and turn it into highly interactive application. These days the use of Dojo toolkit is catching up speed; more and more dynamic web based applications are being developed using Dojo toolkit. Being a web developer, you might have come across the moments that you got confused with framework or libraries. Many times you have seen that most of the collections of the lines of JavaScript claim themselves as frameworks or libraries.

But you should note that frameworks and libraries are two entirely different concepts. A framework is a more or less end-to-end solution for building good web applications, while a library is a collection of tools that assist you with a few specific tasks. Dojo framework or toolkit is one such concept which fits into both categories as it has got all the DOM manipulation, events and animation helpers, and AJAX functions that one cannot get with a standalone library like jQuery.

The advent of Web 2.0 has brought with it the necessity to build up far-reaching JavaScript infrastructure code on the client side. Dojo, the open source toolkit, appeared as the most versatile solution that distinguishes itself from other JavaScript libraries with many capabilities that go far beyond simplifying DOM access. When we talk of client side programming, Dojo has made a bombastic entry, well accompanied with all the DOM manipulation features, events and animation helpers, AJAX functions and much more than that. This blog post introduces you the comprehensive approach to Dojo, its features, advantages, disadvantages, getting started with Dojo, and many relevant concepts. Here in this post you will also learn about Dojo’s support for object-oriented programming in JavaScript which is based on familiar concepts such as classes, constructors, and inheritance, how to create elements, modify or remove nodes, iterating over nodes, working with events and so on and so forth. So, let’s have a look over these one by one.

What is Dojo?

Dojo, which is also most of the times officially called as the Dojo Toolkit, is a JavaScript framework released as open source software which facilitates the Java developer with many components to develop rich internet applications. Dojo is released under BSD or AFL license and offers many widgets, utilities and Ajax libraries to develop free or commercial application. It is really an ultimate solution which saves time, delivers powerful performance, and scales with the development process in a much better manner. Dojo framework exists in three different parts which we are discussing as under:

Dojo Core

Dojo Core as the name suggests, provides core functionality such as ability to make remote method calls, manipulate DOM node, and manipulate Cascading Style Sheets (CSS). It is the main, base functionality which also supports animation features and drag-and-drop functionality holding dozens of general-purpose language utilities, as well as the plumbing for the other parts of Dojo.

Dijit

It is Dojo’s widget library, built on top of the Dojo core which provides template-based, accessible widgets, not only for simple form control but also advanced widgets such as calendar control, menus, toolbars, progress bars, charts, and graphs. Dijit is the UI library of Dojo somewhat similar to jQuery UI providing lot of functionalities such as Calendar pickers, combo boxes, and buttons etc. It is here, where you will find everything to crank up your web forms a notch along with some interesting layout tools.

DojoX

DojoX which is also called as Dojo extensions is a collection of individual projects that acts as an incubator for new ideas and a test bed for experimental additions to the main toolkit, as well as a repository for more stable and mature extensions. It serves as a container for developing extensions to the Dojo toolkit.

Advance Features of Dojo

➡ Since, it is based on HTML and JavaScript, hence, it easy for the developers to learn it fast.

➡ It doesn’t require knowledge of any new programming language; you just need having knowledge of HTML and JavaScript.

➡ Dojo provides higher abstraction layer to the programmer and in this way helps the programmers to develop powerful functions very easily.

➡ It provides a powerful, event-based animation library for developers.

➡ Dojo animation library allows developers to hook into all parts of an animation which enables them to be able to make advanced animations in a simple and intuitive manner.

➡ Dojo’s powerful, lightweight core makes common tasks such as animating elements, manipulating the DOM, and querying with easy CSS syntax, quicker and easier, all without sacrificing performance.

Components of Dojo Framework

Dojo framework comes with a comprehensive list of components which are mentioned below:

➡ DOJO Tree

➡ DOJO Button

➡ DOJO Calendar control

➡ DOJO Grid

➡ DOJO List box, and many more.

Advantages of Dojo

➡ Associative arrays

➡ Loosely typed variables

➡ Regular expressions

➡ Objects and classes

➡ Highly evolved date, math, and string libraries

➡ W3C DOM support in the Dojo

Disadvantages of Dojo

➡ Developer depends on the browser support for the Dojo

➡ There is no way to hide the Dojo code in case of commercial application

Getting Dojo

Once we have an overview of the intro and features of Dojo framework let us jump to know how to get started with it. Since there are dozens of files that make up Dojo, Dijit, and Dojox and number of plug-ins and extensions are made for it. So, let’s start taking the easy route and getting the Base from the Google CDN.

<Script src=”http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js”></script>

Now, create an index.html file and start with this little template:

<Html>
<Head>
<Title> Intro to Dojo, part 1 </title>
<Style>
.highlight
{
Background: yellow;
Font-weight: bold;
Font-size: 1.5em;
}
</style>
</head>
<Body>
<h1> A Heading </h1>
<ul id=”nav”>
<li> <a href=”/”>Home</a> </li>
<li class=”highlight”> <a href=”/portfolio”> Portfolio </a> </li>
<li> <a href=”/about”>About</a> </li>
<li> <a href=”/contact”>Contact</a> </li>
</ul>
<p> this is a paragraph (albeit a very <em>short</em> paragraph).

Also,

<a href=”http://google.com”>here&#39; s a link</a>.
</p>
<script src=”http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js”></script>
</body>
</html>

this is a paragraph (albeit a very short paragraph). Also, here’ s a link.

You can test the above piece of code in any browser of your choice and pop open the respective JavaScript console. You can copy these lines of code and paste it into the console, and see what’s happening.

Finding Elements

It is a good place to start with Dojo because it is here where you will learn Dojo primarily as a replacement for jQuery or whatever DOM-focused library you use. So, let’s start with finding DOM elements.

Although, Dojo has a couple of methods for hunting through the DOM, we will look here dojo.query, which is very much similar to the jQuery (or $) method. It is needed just pass it a CSS selector string, and it will find all the elements in your document that match the selector.

dojo.query (“a”);

Once you run this in a console, you’ll get a NodeList with 5 items holding the five anchor tags.

dojo.query (“a”, “nav”); // returns a NodeList of 4 <a>s

It should be noted that the root parameter can be either a DOM element, or a string that’s an ID of an element. The returned NodeLists also have a query method, which finds nodes that match the selector that are children of the nodes in the original NodeList.

For example:

dojo.query (“a”); // a NodeList of 5 <a>s

dojo.query (“p”).query (“a”); // a NodeList of 1 <a>

Apart from these, there are two other Dojo methods for getting elements. If the element you want has an id attribute, you can use the dojo.byId method.

dojo.byId (“nav”);

When you will try it, it will just return you the plain old DOM element.
The other one is using

dojo.body ()

This one is even more specific. It returns the element, predictably.

Creating Elements

Now, we will learn creating elements with dojo.create. Let us first simply just get a new DOM element like this:

Var h = dojo.create (“h2”); // <h2> </h2>

It is quite simple. But, usually, we want to do more. In that case, we can pass an attributes object as a second parameter.

For example:

Var h = dojo.create (“section”, {role: “banner”, innerHTML: “Learning Dojo”});
// <section> role=”banner”>Learning Dojo</section>

The dojo.create method can also add elements directly to the DOM for which we have to add parameters 3 and 4 as below:

dojo.create (“p”, {innerHTML: “Hi there!”}, dojo.body (), “first”);
dojo.create (“h1”, {innerHTML: “Heading”}, dojo.query (“h1”) [0], “before”);

Here, the third parameter is called the reference node; the new node created will be placed in the DOM relative to that element.

The fourth parameter is the reference parameter, where the position, comes in. By default new element is appended at the last position to the reference node, but it depends upon you, at what position you want to append the new element; you have to specify position for that. For this there are four parameters used which are mentioned as under:

First: This parameter appends the new node to the reference node.

Before and after: This one put the new node before or after the reference node.

Replace: This parameter replaces the reference node with the new node.

Only: This parameter replaces all the child elements of the reference node with the new node.

Modifying Nodes

Once you have created the nodes and want to modify it then what should be done. You should note that dojo.attr is used to get and set attributes on DOM nodes. We have passed attributes object as the second parameter to dojo.create that can be passed again as the second parameter to dojo.attr. Let’s learn how to modify nodes; the code is provided as follows:

Var navUl = dojo.query (“p”) [0];
dojo.attr (navUl, {
Onclick: function () {
Alert (“Learning Dojo!”);
},
Role: “banner”,
Style: {
Background Color: “red”,
FontSize: “2em”
}
});

Now, here you are having options, if you just want to set a single attribute, just pass the name as the second parameter and the value as the third:

dojo.attr (“nav”, “className”, “module”); // first parameter is an id string

If you want to get an attribute, only two parameters are required. Such as:

dojo.attr (dojo.byId (“nav”), “id”); // “nav”

Also, you can use the NodeList method attr in the same way:

Var items = dojo.query (“li”);
Items.attr (“innerHTML”); // [” <a href=”/”>Home</a>”, ” <a href=”/portfolio”>Portfolio</a>”, ” <a href=”/about”>about</a>”, ” <a href=”/contact”>Contact</a>”]
Items.attr ({className: “btn”});

One more thing which you should know that you can use dojo.removeAttr to remove attributes, and the NodeList counterpart to remove attributes from elements completely. It is shown below:

dojo.removeAttr (“nav”, “id”);
dojo.query (“#nav”).removeAttr (“id”);

Also, there are other ways to modify those nodes. You can use dojo.addClass, dojo.removeClass, or dojo.toggleClass to add, remove, or toggle a class or array of classes on single nodes respectively.

Var nav = dojo.byId (“nav”);
dojo.addClass (nav, “selected”);

There are also NodeList counterparts for these methods:

dojo.query (“li”).removeClass ([“selected”, “highlighted”]);

The dojo.replaceClass and the NodeList version:

dojo.query (“p”).replaceClass (“newClass”, “oldClass”);

Removing Nodes

Once you have learnt how to add or modify nodes and want to get rid of a node if you won’t think it as worth; then you can easily remove it. Just pass dojo.destroy either a DOM node or an id string. See the code given below:

Var navList = dojo.byId (“nav”);
dojo.destroy (navList);
// or, easier:
dojo.destroy (“nav”);

It should be noted that dojo.destroy only accepts single nodes, and doesn’t have a NodeList counterpart method and therefore there is no way to destroy a NodeList.

Also, in certain circumstances, you just want to take nodes out of the DOM, but not actually destroy them, so that you might again plug-in it as per requirement. In such a scenario, the orphan method comes in handy to use. This method is only a NodeList method:

dojo.query (“li”).orphan ();

Also, if you’d only like to orphan certain nodes from original NodeList, pass is a filtering selector. Note that this filter only matches against nodes in the original NodeList, and not their children:

dojo.query (“li”).orphan (“li: first-of-type”); // will only orphan the first &amp; lt; li>

dojo.empty () take a single node or id and remove everything inside it. Dojo is actually just doing node. InnerHTML = “” which is behind the scenes.

Moving / Duplicating Nodes

Sometimes you face the need of duplicating the same node somewhere else or moving a node to some other place. To accomplish this, there are a couple of methods which help you to move or duplicate DOM nodes.

The first method requires three parameters: the node, the reference node, and the position. These are:

Var nav = dojo.byId (“nav”),
p = dojo.query (“p”) [0];
dojo.place (nav, p, “after”); // moves ‘nav’ to right after ‘p’ in the DOM

Following the trend of so many Dojo DOM methods, there’s a NodeList method counterpart:

dojo.query (“p”).place (dojo.body (), “first”);

Another one is dojo.clone. If you pass this method a reference to a DOM node, it will clone, or copy, that node and all its children. This’ll duplicate our example navigation ul, and put the copy at the top of the document:

Var u2 = dojo.clone (dojo.byId (“nav”));
dojo.attr (u2, “id”, “nav2”);
dojo.place (u2, dojo.body (), “first”);

You can use dojo.clone to clone other JavaScript objects as well.

Var o1 = {one: “one”},
o2 = dojo.clone (o1);
o1 === o2; // false

There is another NodeList method “adopt”. It takes two parameters: a selector string or DOM node(s), and an optional position value, which has the same options as dojo.place (“last” as default, etc.). Then, the adopt method will take the element(s) you passed in as the first parameter or the elements in the DOM that match the selector and position them relative to the first element in the NodeList. Finally, it returns the adopted elements as a new NodeList replacing all the children of the first <li> with the paragraph.

dojo.query (“li”).adopt (“p”, “only”);

Iterating over Nodes

Likewise loop is used to iterate over array and since NodeLists are similar to arrays, you could use just a regular for loop to iterate over the nodes. However, NodeLists have a forEach method:

dojo.query (“li”).forEach (function (element, index, arr)
{
// do your thing
});

As you can see, the callback function takes three parameters, the element, the index, and the array itself. And, if you want to loop over other arrays, you can use dojo.forEach in the same way, just passing that array as the first parameter. The code is shown below:

dojo.forEach ([1, 2, 3], function (item)
{
// act here
});

ForEach method returns the NodeList or array that you started with. In case if you want to return a changed array, you can use the map method. Whatever you return from the callback function will be in the array (or NodeList) returned at the end.

dojo.map ([1, 2, 3], function (item)
{
Return item * item;
}); // [1, 4, 9]

The next thing you should know is the filtering of nodes out of a NodeList, with filter. You can just pass this method a CSS selector, and only elements that match it will be kept.

dojo.query (“li”).filter (“.highlight”); // NodeList with one <li class=”selected”>

You should note that, filter can also take a callback function that receives three parameters: the current item, its index, and the array. If the function returns true, the element is kept; otherwise, it’s left out. A new NodeList of the kept elements is returned.

dojo.query (“li”).filter (function (el)
{
Return dojo.query (“a”, el) [0].innerHTML === “About”;
}); // returns a NodeList that holds only the list item with the text “About”

Also there is another version available which is handful to use. This one is dojo.filter version that takes an array as the first parameter and the callback as a second.

dojo.filter ([“Nettuts”, “Psdtuts”, “Phototuts”], function (el, idx, arr)
{
Return el.slice (0, 1) === “P”
}); // [“Psdtuts”, “Phototuts”]

Working with Events

Till now, you might have learned much more about Dojo and its working. Let’s now talk about how to start working with events with Dojo. Let’s start with DOM events, let us suppose we want to do something when our <h1> is clicked. There are several ways to do this, let us discuss them one by one.

First, let us assume we are handling an event that occurs on an element or elements that we have retrieved with dojo.query. We could use the onclick method that NodeList s has:

dojo.query (“h1”).onclick (function () {
Alert (“Learning Dojo”);
});

However, this is really just a “syntactic sugar” method but Dojo is using the connect NodeList method behind the scenes:

dojo.query (“h1”).connect (“onclick”, function (e) {
Alert (“learning Dojo”);
});

This method actually passes the job on to another method, dojo.connect; you’ll probably use this method directly when you’ve got a single DOM node that you want to handle an event on:

Var h = dojo.query (“h1”) [0]; // or dojo.byId (“some element”),

for example

dojo.connect (h, “onclick”, function () {
Alert (“learning Dojo”);
});

One thing you must have noticed here, each time we “move up a layer”, we add another parameter to the beginning of the method call.
Now, let’s talk briefly about disconnecting events. When using the methods provided on a NodeList instance, there’s currently no easy way to disconnect the events just because dojo.connect returns a handle that is used in the disconnection of events. To disconnect an event, pass its handle to dojo.disconnect:

Var h = dojo.query (“h1”) [0],
Handle = dojo.connect (h, “onclick”, function () {
Alert (“learning Dojo”);
dojo.disconnect (handle);
});

But in case, if you are putting the same in your console, and then clicking the <h1>, you’ll get an alert. Then the handler will be disconnected, so subsequent clicks won’t do anything.

If you want to create your own events, then in that case, you can use Dojo’s publish and subscribe methods. If you’re even little some familiar with how other pub/sub systems work, you’ll surely have no trouble with this one. Next, let’s see below:
To subscribe a topic, simply pass the name of the topic and the function that should run when the topic is published:

dojo.subscribe (“myTopic”, function (data, moreData)
{
Alert (data);
console.log (moreData);
});

Once subscribed, you can then publish the topic almost as easily by the code given as under:

dojo.publish (“myTopic”, [“some data”, “some more data”]);

You should note that, any data you want to pass to functions that subscribe to your topic gets put in an array and passed as a second parameter.

Conclusion

We hope through this blog post, you might have got the proper ideology about Dojo framework or toolkit as here we have covered almost all the important part of the DOM functionality built into the Dojo Base file we’re getting from Google’s CDN. Although there are much more things to learn but whatever is discussed here, it is sufficient to get started with Dojo. Dojo framework is really a big achievement of team of developers who aimed to build up far-reaching JavaScript infrastructure code on the client side.
Please do not forget to leave your comments sharing your thoughts and concerns regarding this post in the comments section of this blog. We will really appreciate your efforts.

Williams Heilmann

Williams Heilmann has been associated with PSDtoWordPressExpert for many years. He has extensive experience as a web developer and works with this company to offer the best WordPress solutions to suit the specific needs of the clients. Also, he has got a flair for writing which he consumes in writing the informational blogs for submission on different websites.