Version 1.7Creating NodeLists
API Quick Reference
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
//get all links in another frame var myNodeList = glow.dom.get(window.frames).get("a");
Creating a NodeList using an HTML string
If you're wanting to create nodes from scratch,
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