Learn Modern Unobtrusive JavaScript - Nodelists

Learn Modern Unobtrusive JavaScript

Nodelists

From  Kumar Rajguru , former PlusDeveloper.in Guide

Earlier tutorials in this series have used document.getElementById() to reference a specific element within the current web page. There are two additional calls which also provide access to the elements in the web page only these two commands do not just return one element reference but instead return all of the elements in the page that match the specified criteria. These two calls are document.getElementsByName() anddocument.getElementsByTagName(). Since each of these returns multiple references they need to be returned using an object type that supports multiple fields. The actual object type that these calls return is a nodelist. There is no need to be able to define a nodelist yourself in JavaScript since a nodelist always relates to the actual elements found in the web page Running either of the two DOM commands previously mentioned will make the appropriate nodelist object available to JavaScript and the appropriate DOM commands to update the web page will update the nodelist appropriately.

A nodelist is a more advanced object than an Object is as the elements in a nodelist do have an order and a length. This doesn't make a nodelist an Array though since none of the array methods can be used on a nodelist. The only way to change the content of a nodelist is via the appropriate DOM commands.

Of the two commands for creating a nodelist getElementsByName is the less useful of the two since it can only reference those elements within the page that actually have a name attribute associated with them. This basically limits their use to referencing form fields which are the only elements in a web page that are allowed to have a name. The getElementsByTagName is far more useful since you can specify any tag name in the command or even specify '*' in order to retrieve a nodelist of all of the elements in the page. You can then loop through all of the elements in the nodelist performing whatever action you require on each node that meets whatever other criteria you specify and create an array of references to those nodes that satisfy that specific criteria. As this is an array we can use all the usual array methods on it. Since the array only contains references to the nodelist entries, and actions performed on the array will not affect the nodelist at all.

Let's look at an example of using getElementByTagName to go through all of the elements in our web page and create an array of references to all of those elements that have a particular class associated with them. We are going to extend the functionality of the document object by adding a new method that will retrieve just those elements with a specific class.

document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp("\\b"+cl+"\\b");
    var elem = this.getElementsByTagName("*");
    for (var i = 0; i < elem.length; i++) {
       var classes = elem[i ].className;
       if (myclass.test(classes)) retnode.push(elem[i ]);
       }
    return retnode;
 };

We haven't yet looked at the RegExp object but basically that object allows us to test the content of a field for a match to a particular pattern. In the case of classes associated with an element, an element can have multiple classes attached as a space separated list of class names. The myclass RegExp object therefore allows us to easily test if a particular class name appears in that space separated list.

The for statement provides us with a way to process all of the elements in the nodelist in order. It takes three values separated by semi-colons. The first value indicates start conditions. We set i to zero so that we can use i as the value of the element within the nodelist that we want to check and since nodelists like arrays start from zero, that is where we need to start. The second value indicates the test we want it to make to finish the loop. the length property on a nodelist or array contains the number of elements in that nodelist or array and so we only want to process while the element number we are looking at is less than the length (since the first element is numbered zero). The last value i++ instructs the for loop to add one to i each time through the loop.