Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

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

Heading 1 Heading 2 Heading 3 Heading 4
2864 5698 1254 3659
5876 7538 2574 1234
1254 2864 5698 3659
5876 2574 7538 1234
2864 5698 3659 1254
7538 5876 2574 1234

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.

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.