Classes

• _global_
• glow
• glow.env
• glow.events
• glow.events.DomEvent
• glow.events.Event
• glow.events.KeyboardEvent
• glow.events.Target
• glow.NodeList
• glow.util

Class glow.NodeList

Defined in: core.js.

			// empty NodeList
			var myNodeList = glow();

			// using glow to return a NodeList then chaining methods
			glow('p').addClass('eg').append('
Hello!
');

			// creating an element from a string
			glow('
Hello!
').appendTo('body');

			// get the number of paragraphs on the page
			glow('p').length;

		glow("#login a").addClass("highlight");

Parameters:

{string} name

The name of the class to add.

Returns:

{glow.NodeList}

			// adds a paragraph after each heading
			glow('h1, h2, h3').after('
That was a nice heading.
');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Node(s) to insert Strings will be treated as HTML strings.

Returns:

{glow.NodeList} Original NodeList

		// get ancestor elements for anchor elements 
		var ancestors = glow.dom.get("a").ancestors();

Parameters:

{Function|string} filter Optional

Filter test If a string is provided, it is used in a call to {@link glow.ElementList#is ElementList#is}. If a function is provided it will be passed 2 arguments, the index of the current item, and the ElementList being itterated over. Inside the function 'this' refers to the HTMLElement. Return true to keep the node, or false to remove it.

Returns:

{glow.dom.NodeList} Returns NodeList

			// ends every paragraph with '...'
			glow('p').append('...');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Nodes(s) to append Strings will be treated as HTML strings.

Returns:

{glow.NodeList} Original NodeList

			// appends '...' to every paragraph
			glow('...').appendTo('p');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} node

Node(s) to append to. Strings will be treated as CSS selectors or HTML strings.

Returns:

{glow.NodeList} The appended nodes.

		var myNodeList = glow(".myImgClass");

		// get an attribute
		myNodeList.attr("class");

		// set an attribute
		myNodeList.attr("class", "anotherImgClass");

		// set multiple attributes
		myNodeList.attr({
		  src: "a.png",
		  alt: "Cat jumping through a field"
		});

Parameters:

{string | Object} name

The name of the attribute, or an object of name/value pairs

{string} value Optional

The value to set the attribute to.

Returns:

{string | undefined | glow.NodeList} When setting attributes this method returns its own NodeList, otherwise returns the attribute value. The attribute name is always treated as case-insensitive. When getting, the returned value will be of type string unless that particular attribute was never set and there is no default value, in which case the returned value will be an empty string.

			// adds a div before each paragraph
			glow('p').before('
Here comes a paragraph!
');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Node(s) to insert Strings will be treated as HTML strings.

Returns:

{glow.NodeList} Original NodeList

		// get all list items
		var items = glow.dom.get("ul, ol").children();

Returns:

{glow.dom.NodeList} Returns a new NodeList containing all the child nodes

			// get a copy of all heading elements
			var myClones = glow.get("h1, h2, h3, h4, h5, h6").clone();

Returns:

{glow.NodeList} Returns a new NodeList containing clones of all the nodes in the NodeList

Parameters:

{string | HTMLELement | NodeList} Single

element to check for

Returns:

{boolean} myElementList.contains(elm) // Returns true if an element in myElementList contains elm, or IS elm.

			// get a copy of all heading elements
			var myCopies = glow.get("h1, h2, h3, h4, h5, h6").copy();

Returns:

{glow.NodeList} Returns a new NodeList containing copies of all the nodes in the NodeList

		// get value from first node
		glow("#subNav").css("display");

		// set left padding to 10px on all nodes
		glow("#subNav li").css("padding-left", "2em");

		// where appropriate, px is assumed when no unit is passed
		glow("#mainPromo").css("margin-top", 300);

		// set multiple CSS values at once
		// NOTE: Property names containing a hyphen such as font-weight must be quoted
		glow("#myDiv").css({
			'font-weight': 'bold',
			'padding'	 : '10px',
			'color'		 : '#00cc99'
		});

Parameters:

{string | Object} property

The CSS property name, or object of property-value pairs to set

{string | number} value Optional

The value to apply Number values will be treated as 'px' unless the CSS property accepts a unitless value. If value is omitted, the value for the given property will be returned

Returns:

{glow.NodeList | string} Returns the NodeList when setting value, or the CSS value when getting values. CSS values are strings. For instance, "height" will return "25px" for an element 25 pixels high. You can use parseInt to convert these values.

	
	glow("p").data("tea", "milky");
	var colour = glow("p").data("tea"); // milky

Parameters:

{string|Object} key Optional

The name of the value in glow's data store.

{Object} val Optional

The value you wish to associate with the given name.

Returns:

{Object} When setting a value this method can be chained, as in that case it will return itself.

See:

glow.NodeList#removeData

glow.NodeList#removeData

			// Using 'on' to catch clicks on links in a list
			glow.get('#nav a').on('click', function() {
				// do stuff
			});
			
			// The above adds a listener to each link, any links created later
			// will not have this listener, so we won't hear about them.
			
			// Using 'delegate' to catch clicks on links in a list
			glow.get('#nav').delegate('click', 'a', function() {
				// do stuff
			});
			
			// The above only adds one listener to #nav which tracks clicks
			// to any links within. This includes elements created after 'delegate'
			// was called.

			// Using delegate to change class names on table rows so :hover
			// behaviour can be emulated in IE6
			glow.get('#contactData').delegate('mouseover', 'tr', function() {
				glow.get(this).addClass('hover');
			});
			
			glow.get('#contactData').delegate('mouseout', 'tr', function() {
				glow.get(this).removeClass('hover');
			});

Parameters:

{String} eventName

Name of the event to listen for. This can be any regular DOM event ('click', 'mouseover' etc) or a special event of NodeList.

{String} selector

CSS selector of child elements to listen for events on For example, if you were wanting to hear events from links, this would be 'a'.

{Function} callback

Function to call when the event fires. The callback is passed a single event object. The type of this object is glow.DomEvent unless otherwise stated.

{Object} thisVal Optional

Value of 'this' within the callback. By default, this is the dom node matched by 'selector'.

Returns:

this

			// destroy all links in the document
			glow("a").destroy();

Returns:

{glow.NodeList} An empty NodeList

			function clickListener(domEvent) {
				// ...
			}
			
			// adding listeners
			glow.get('a').on('click', clickListener);
			
			// removing listeners
			glow.get('a').detach('click', clickListener);

Parameters:

{String} eventName

Name of the event to detach the listener from

{Function} callback

Listener callback to detach

Returns:

this

			function clickListener(domEvent) {
				// ...
			}
			
			// adding listeners
			glow.get('#nav').delegate('click', 'a', clickListener);
			
			// removing listeners
			glow.get('#nav').detachDelegate('click', 'a', clickListener);

Parameters:

{String} eventName

Name of the event to detach the listener from

{String} selector

CSS selector of child elements the listener is listening to

{Function} callback

Listener callback to detach

Returns:

this

			// add "link number: x" to each link, where x is the index of the link
			glow("a").each(function(i, nodeList) {
				glow(this).append(' link number: ' + i);
			});

			// breaking out of an each loop
			glow("a").each(function(i, nodeList) {
				// do stuff
				if ( glow(this).hasClass('whatever') ) {
					// we don't want to process any more links
					return false;
				}
			});

Parameters:

{Function} callback

The function to call for each node. The function will be passed 2 arguments, the index of the current item, and the NodeList being iterated over. Inside the function 'this' refers to the Node. Returning false from this function stops further iterations

Returns:

{glow.NodeList}

			// remove the contents of all textareas
			glow("textarea").empty();

Returns:

{glow.NodeList} Original nodes

			// the following returns true
			glow('#blah').eq( document.getElementById('blah') );

Parameters:

{Node | Node[] | glow.NodeList} nodeList

The NodeList to compare to.

Returns:

{boolean}

See:

for testing if a NodeList item matches a selector

			// return images with a width greater than 320
			glow("img").filter(function () {
				return glow(this).width() > 320;
			});

			// Get items that don't have an alt attribute
			myElementList.filter(':not([alt])');

Parameters:

{Function|string} test

Filter test If a string is provided it's treated as a CSS selector. Elements which match the CSS selector are added to the new NodeList. If 'test' is a function, it will be called per node in the NodeList. The function is passed 2 arguments, the index of the current item, and the ElementList being itterated over. Inside the function 'this' refers to the node. Return true to add the element to the new NodeList.

Returns:

{glow.NodeList} A new NodeList containing the filtered nodes

		   glow.get('#testLink').on('click', function() {
			   alert('Link clicked!');
		   });
		   
		   // The following causes 'Link clicked!' to be alerted, but doesn't
		   // cause the browser to follow the link
		   glow.get('#testLink').fire('click');

Parameters:

{String} eventName

Name of the event to fire

{glow.events.Event} event Optional

Event object to pass into listeners. You can provide a simple object of key / value pairs which will be added as properties of a glow.events.Event instance.

Returns:

glow.events.Event

		// create a new NodeList
		var myNodeList = glow.dom.create("
Link
");

		// get 'a' tags that are decendants of the NodeList nodes
		myNewNodeList = myNodeList.get("a");

Parameters:

{String} selector

CSS selector

Returns:

{glow.NodeList} Returns a new NodeList containing matched elements

		if ( glow("#myImg").hasAttr("alt") ){
			// ...
		}

Parameters:

{string} name

The name of the attribute to test for.

Returns:

{boolean|undefined} Returns undefined if the first node is not an element, or if the NodeList is empty, otherwise returns true/false to indicate if that attribute exists on the first element.

		if ( glow("#myInput").hasClass("errored") ){
			// ...
		}

Parameters:

{string} name

The name of the class to test for.

Returns:

{boolean}

		// get the height of #myDiv
		glow("#myDiv").height();

		// set the height of list items in #myList to 200 pixels
		glow("#myList > li").height(200);

		// get the height of the document
		glow(document).height();

		// get the height of the window
		glow(window).height();

Parameters:

{Number} height Optional

New height in pixels for each element in the list If ommited, the height of the first element is returned

Returns:

{glow.NodeList | number} Height of first element, or original NodeList when setting heights.

		// Hides all list items within #myList
		glow("#myList li").hide();

Returns:

{glow.NodeList}

			// get the html in #footer
			var footerContents = glow("#footer").html();

			// set a new footer
			glow("#footer").html("Hello World!");

Parameters:

{String} htmlString Optional

String to set as the HTML of elements If omitted, the html for the first element in the list is returned.

Returns:

{glow.NodeList | string} Returns the original NodeList when setting, or the HTML content when getting.

			// adds a paragraph after each heading
			glow('
HAI!
').insertAfter('h1, h2, h3');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Node(s) to insert after Strings will be treated as CSS selectors.

Returns:

{glow.NodeList} Inserted nodes.

			// adds a div before each paragraph
			glow('
Here comes a paragraph!
').insertBefore('p');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Node(s) to insert before Strings will be treated as CSS selectors.

Returns:

{glow.NodeList} Inserted nodes.

			if ( myNodeList.is(':visible') ) {
				// ...
			}

Parameters:

{string} selector

CSS selector

Returns:

{boolean}

			// get the html from the fourth element
			myNodeList.item(3).html();

			// add a class name to the last item
			myNodeList.item(-1).addClass('last');

Parameters:

{number} index

The numeric index of the node to return.

Returns:

{glow.NodeList} A new NodeList containing a single item

		// gets the element following #myLink (if there is one)
		var next = glow.get("#myLink").next();

		// get the next sibling link element after #skipLink
		glow.get('#skipLink').next('a')

Parameters:

{string | HTMLElement | NodeList} search Optional

Search value If provided, will seek the next sibling element until a match is found

Returns:

{glow.ElementList} A new ElementList containing the next sibling elements that match the (optional) filter.

		glow("#myDiv").offset().top

Returns:

{Object} Returns an object with "top" & "left" properties in pixels

		   glow.get('#testLink').on('click', function(domEvent) {
			   // do stuff
			   
			   // if you want to cancel the default action (following the link)...
			   return false;
		   });

Parameters:

{String} eventName

Name of the event to listen for. This can be any regular DOM event ('click', 'mouseover' etc) or a special event of NodeList.

{Function} callback

Function to call when the event fires. The callback is passed a single event object. The type of this object is glow.DomEvent unless otherwise stated.

{Object} thisVal Optional

Value of 'this' within the callback. By default, this is the dom node being listened to.

Returns:

this

		// elements which contain links
		var parents = glow.dom.get("a").parent();

Parameters:

{string | HTMLElement | NodeList} search Optional

Search value If provided, will seek the next parent element until a match is found

Returns:

{glow.NodeList} Returns a new NodeList containing the parent nodes, with duplicates removed

		// get the top distance from the positioned parent
		glow("#elm").position().top

Returns:

{Object} An object with 'top' and 'left' number properties

			// prepends every paragraph with 'Paragraph: '
			glow('p').prepend('Paragraph: ');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} nodes

Nodes(s) to prepend Strings will be treated as HTML strings.

Returns:

{glow.NodeList} Original NodeList

			// prepends 'Paragraph: ' to every paragraph
			glow('Paragraph: ').prependTo('p');

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} node

Node(s) to prepend to Strings will be treated as CSS selectors or HTML strings.

Returns:

{glow.NodeList} The prepended nodes.

		// gets the element before #myLink (if there is one)
		var next = glow.get("#myLink").prev();

		// get the previous sibling link element before #skipLink
		glow.get('#skipLink').prev('a')

Parameters:

{string | HTMLElement | NodeList} search Optional

Search value If provided, will seek the previous sibling element until a match is found

Returns:

{glow.ElementList} A new ElementList containing the previous sibling elements that match the (optional) filter.

		var myNodeList = glow("#formElement");

		// get the node name
		myNodeList.prop("nodeName");

		// set a property
		myNodeList.prop("_secretValue", 10);

		// set multiple properties
		myNodeList.prop({
			checked: true,
			_secretValue: 10
		});

Parameters:

{string | Object} name

The name of the property, or an object of name/value pairs

{string} value Optional

The value to set the property to.

Returns:

{string | glow.NodeList} When setting properties it returns the NodeList, otherwise returns the property value.

			myNodeList.push('
Foo
').push('h1');

Parameters:

{string | Node | Node[] | glow.NodeList} nodes

Node(s) to add to the NodeList Strings will be treated as CSS selectors or HTML strings.

Returns:

{glow.NodeList}

			// take all the links out of a document
			glow("a").remove();

Returns:

{glow.NodeList} The removed elements

		glow("a").removeAttr("target");

Parameters:

{string} name

The name of the attribute to remove.

Returns:

{glow.NodeList}

		glow("#footer #login a").removeClass("highlight");

Parameters:

{string} name

The name of the class to remove.

Returns:

{glow.NodeList}

Parameters:

{string} key Optional

The name of the value in glow's data store.

See:

glow.NodeList#data

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} elements

Element(s) to insert into the document If there is more than one element in the NodeList, then the given elements replace the first element, clones are appended to the other elements.

Returns:

{glow.NodeList} The replaced elements Call {@link glow.NodeList#destroy destroy} on these if you no longer need them.

		// get the scroll left value of #myDiv
		var scrollPos = glow("#myDiv").scrollLeft();
		// scrollPos is a number, eg: 45

		// set the scroll left value of #myDiv to 20
		glow("#myDiv").scrollLeft(20);

		// get the scrollLeft of the window
		glow(window).scrollLeft();
		// scrollPos is a number, eg: 45

Parameters:

{Number} val Optional

New left scroll position Omit this to get the current scroll position

Returns:

{glow.NodeList | number} Current scrollLeft value, or NodeList when setting scroll position.

		// get the scroll top value of #myDiv
		var scrollPos = glow("#myDiv").scrollTop();
		// scrollPos is a number, eg: 45

		// set the scroll top value of #myDiv to 20
		glow("#myDiv").scrollTop(20);

		// get the scrollTop of the window
		glow(window).scrollTop();
		// scrollPos is a number, eg: 45

Parameters:

{Number} val Optional

New top scroll position Omit this to get the current scroll position

Returns:

{glow.NodeList | number} Current scrollTop value, or NodeList when setting scroll position.

		// Show element with ID myDiv
		glow("#myDiv").show();

		// Show all list items within #myList
		glow("#myList li").show();

Returns:

{glow.NodeList}

		var myNodeList = glow("
");
		myNodeList.slice(1, 2); // selects the paragraph
		myNodeList.slice(-1); // same thing, selects the paragraph

Parameters:

{number} start

Start index If negative, it specifies a position measured from the end of the list

{number} end Optional

End index By default, this is the end of the list. A negative end specifies a position measured from the end of the list.

Returns:

{glow.NodeList} A new sliced NodeList

			//get links in alphabetical (well, lexicographical) order
			var links = glow("a").sort(function(elementA, elementB) {
				return glow(elementA).text() < glow(elementB).text() ? -1 : 1;
			})

Parameters:

{Function} func Optional

Function to determine sort order This function will be passed 2 elements (elementA, elementB). The function should return a number less than 0 to sort elementA lower than elementB and greater than 0 to sort elementA higher than elementB. If no function is provided, elements will be sorted in document order.

Returns:

{glow.NodeList} A new sorted NodeList

			// set text
			var div = glow("
").text("Fun & games!");
			// 
Func & games!

			// get text
			var mainHeading = glow('#mainHeading').text();

Parameters:

{String} text Optional

String to set as the text of elements If omitted, the test for the first element in the list is returned.

Returns:

{glow.NodeList | String} Returns the original NodeList when setting, or the text content when getting.

		glow(".onOffSwitch").toggleClass("on");

Parameters:

{string} name

The name of the class to toggle.

Returns:

{glow.NodeList}

			// Before: 
Hello
			// unwrap the given element
			glow("#mySpan").unwrap();
			// After: 
Hello

Returns:

{glow.NodeList} The now unwrapped elements

		// get a value
		var username = glow.dom.get("input#username").val();

		
		/ get values from a form
		var userDetails = glow.dom.get("form").val();

		// set a value
		glow.dom.get("input#username").val("example username");

		// set values in a form
		glow.dom.get("form").val({
			username : "another",
			name     : "A N Other"
		});

Parameters:

{String | Object} value Optional

The value to set the form element/elements to.

Returns:

{glow.dom.NodeList | String | Object} When used to set a value it returns the NodeList, otherwise returns the value as described above.

		// get the width of #myDiv
		glow("#myDiv").width();

		// set the width of list items in #myList to 200 pixels
		glow("#myList > li").width(200);

		// get the width of the document
		glow(document).width();

		// get the width of the window
		glow(window).width();

Parameters:

{Number} width Optional

New width in pixels for each element in the list If ommited, the width of the first element is returned

Returns:

{glow.NodeList | number} width of first element, or original NodeList when setting widths.

			// Hello
			glow("#mySpan").wrap("
");
			// Makes:
			// 

			//     

			//         Hello
			//     
			// 

Parameters:

{string | HTMLElement | HTMLElement[] | glow.NodeList} wrapper

Element to use as a wrapper Strings will be treated as HTML strings if they begin with <, else they'll be treated as a CSS selector.

Returns:

{glow.NodeList} The NodeList with new wrapper parents

Parameters:

{glow.events.KeyboardEvent} event

Event Object

Parameters:

{glow.events.KeyboardEvent} event

Event Object

Parameters:

{glow.events.KeyboardEvent} event

Event Object

Parameters:

{glow.events.DomEvent} event

Event Object

Parameters:

{glow.events.DomEvent} event

Event Object