Version 1.5Creating NodeLists

The Concept of NodeLists

In Glow, you interact with the DOM using NodeLists. These are arrays of nodes featuring many additional methods allowing you to interact with those nodes.

You can create a NodeList by creating new nodes, or selecting nodes already on the page.

Creating a NodeList with CSS

You can select nodes on a page using a CSS selector.

//select all the child list items of a ul with id "menu"
var myNodeList = glow.dom.get("ul#menu > li");

Now you have a node list of all the list items, you can easily add events to those items, or filter the list further to identify list items which contain other lists.

Creating a NodeList from existing nodes

If you already have a variable containing a node or an array of nodes, you can wrap these within a NodeList to use its functionality.

//convert an array of nodes into a NodeList
var myNodeList = glow.dom.get(arrayOfNodes);
//create a NodeList from two nodes
var myNodeList2 = glow.dom.get(myBanner, myMenu);

Once you have a NodeList, you can filter it further using get(). This is especially useful if you want to process nodes which aren't attached to the current document.

//get all links in another frame
var myNodeList = glow.dom.get(window.frames[1]).get("a");

Creating a NodeList using an HTML string

If you're wanting to create nodes from scratch, glow.dom.create() lets you do this with an HTML string.

var myNodeList = glow.dom.create('' + '<h2>Menu</h2>' + '<ul id="menu">' + '<li>Item 1</li>' + '<li>Item 2</li>' + '</ul>'
);

Creating an empty NodeList

Sometimes it can be useful to have an empty NodeList that you add items to later

var myNodeList = new glow.dom.NodeList();

Shortcuts to glow.dom.get

If you are using glow.dom.get often, you may wish to create your own shortcut to the function. The shortcut can be mapped to any variable.

var $ = glow.dom.get;
var myNodeList = $("div#banner"); //get banner div