Dojo: The Definitive Guide

Creating NodeList Extensions

While the built-in methods for NodeList are quite useful, it's not going to be long before you'll find that there's this one method that you could really benefit from having on hand. Fortunately, it takes very little effort to inject your own functionality into NodeList. Consider the following use case accomplished via query that returns the innerHTML for each element of a NodeList :

dojo.query("p").map(function(x) {return x.innerHTML;});

Compared to working up that solution from scratch, you already have a really concise solution, but you could go even further to simplifying matters by using the even more concise String-as-Function syntax with the following improvement:

dojo.query("p").map("return item.innerHTML;"); //Used the special item identifier

That's definitely an improvement—would you believe that your code could still be even more readable and concise ? Consider the following extension to NodeList, in which you embed the mapping inside of a more readable and elegant function call that is very intuitively named so that it's completely obvious exactly what is happening:

//Extend NodeList's prototype with a new function
dojo.extend(dojo.NodeList, {
    innerHTML : function(  ) {
        return this.map("return item.innerHTML");
    }
});


//Call the new function
dojo.query("p").innerHTML(  );

What's great about extending NodeList is that for a very little bit of planning up front, you can significantly declutter your design and make it a lot more maintainable at the same time.

The recommended practice for modularizing up this kind of extension is to create a submodule called ext-dojo with a resource file called NodeList.js inside of it so that you end up with a dojo.require statement that is crystal clear to whoever ends up reading your code. In the end, you have a situation that's a win for everyone. Your final usage of the extension might end up looking like the following example once you're all finished with it:

/* ... *
dojo.require("dtdg.ext-dojo.NodeList");

/* ...*/

dojo.query("p").innerHTML(  );

Clearly, you could go as far as to name the resource file NodeList-innerHTML.js if you wanted to be pedantic; do whatever makes you most comfortable, so long as you are consistent.