Version 1.5Working With NodeLists

Overview

Ok, you've gone to the trouble of making a NodeList, what can you do with it?

The API covers all the methods of glow.dom.NodeList which allow you to interact with your nodes.

Chaining your commands

Some NodeList methods return a value. myNodes.hasClass("active") for instance will return true or false. However, most methods return a NodeList so methods can be easily chained together.

var links = glow.dom.get("#banner a, #nav a");
var sortedLinks = links.sort();
var linksClone = sortedLinks.clone();
linksClone.appendTo("#linksIndex");
var firstLink = linksClone.slice(0, 1);
firstLink.addClass("firstLink");

Can be shortened to:

glow.dom.get("#banner a, #nav a").sort().clone(). appendTo("#linksIndex").slice(0, 1).addClass("firstLink");

Run Example

Striping tables

Giving tables a different style on odd & even rows is a common effect that can be achieved using nth-child in CSS3. However, some target browsers do not support nth-child, but the same effect can be achieved by setting class names on table rows using glow.

glow.dom.get("table.stripe").each(function() { glow.dom.get(this).get("tr").each(function(i) { glow.dom.get(this).addClass(i%2 ? "even" : "odd"); });
});

Run Example

Above, we gather all the tables on the page with class "stripe", for each of those we itterate over their rows assigning a class name of "odd" or "even".

The each() method takes a function to be called against every node in a NodeList. Within the function, "this" refers to the node and the first parameter refers to the index of that node in the list.

Because "this" is a standard node, we use glow.dom.get to wrap it in a NodeList so we can easily filter it and assign class names.

The visual difference between the table rows is achieved with CSS using those class names.

Serialising form data

The val() method of NodeLists can be used on forms as well as form elements. Using it on forms can be a handy way of serialising a page's state.

You can use glow.dom and glow.data to serialise a form into a URL-encoded string and add it to the query string of the page.

var myForm; glow.ready(function() { myForm = glow.dom.get("#myForm"); revertState();
}); function savePageState() { window.location = "?" + glow.data.encodeUrl(myForm.val());
} function revertState() { myForm.val(glow.data.decodeUrl(window.location.search.slice(1)));
}

The above uses val() to retrieve the form as a JSON-like object. glow.data.encodeUrl is used to convert that object into a string so it can be used in the querystring.

To revert the state of the page, the reverse is done. The querystring is converted into an object and fed to val() which populates the appropiate form fields.