Login Register Help
API Documentation
Choose a stylesheet:

Constructordojo.NodeList

dojo.NodeList instances provide many utilities that reflect core Dojo APIs for Array iteration and manipulation, DOM manipulation, and event handling. Instead of needing to dig up functions in the dojo.* namespace, NodeLists generally make the full power of Dojo available for DOM manipulation tasks in a simple, chainable way.

Usage

var foo=new dojo.NodeList();

Examples

Example 1

create a node list from a node

new dojo.NodeList(dojo.byId("foo"));

Example 2

get a NodeList from a CSS query and iterate on it

var l = dojo.query(".thinger");
l.forEach(function(node, index, nodeList){
    console.log(index, node.innerHTML);
});

Example 3

use native and Dojo-provided array methods to manipulate a NodeList without needing to use dojo.* functions explicitly:

var l = dojo.query(".thinger");
// since NodeLists are real arrays, they have a length
// property that is both readable and writable and
// push/pop/shift/unshift methods
console.log(l.length);
l.push(dojo.create("<span>howdy!</span>"));
 
 
// dojo's normalized array methods work too:
console.log( l.indexOf(dojo.byId("foo")) );
// ...including the special "function as string" shorthand
console.log( l.every("item.nodeType == 1") );
 
 
// NodeLists can be [..] indexed, or you can use the at()
// function to get specific items wrapped in a new NodeList:
var node = l[3]; // the 4th element
var newList = l.at(1, 3); // the 2nd and 4th elements

Example 4

the style functions you expect are all there too:

// style() as a getter...
var borders = dojo.query(".thinger").style("border");
// ...and as a setter:
dojo.query(".thinger").style("border", "1px solid black");
// class manipulation
dojo.query("li:nth-child(even)").addClass("even");
// even getting the coordinates of all the items
var coords = dojo.query(".thinger").coords();

Example 5

DOM manipulation functions from the dojo.* namespace area also available:

// remove all of the elements in the list from their
// parents (akin to "deleting" them from the document)
dojo.query(".thinger").orphan();
// place all elements in the list at the front of #foo
dojo.query(".thinger").place("foo", "first");

Example 6

Event handling couldn’t be easier. dojo.connect is mapped in, and shortcut handlers are provided for most DOM events:

// like dojo.connect(), but with implicit scope
dojo.query("li").connect("onclick", console, "log");
 
 
// many common event handlers are already available directly:
dojo.query("li").onclick(console, "log");
var toggleHovered = dojo.hitch(dojo, "toggleClass", "hovered");
dojo.query("p")
    .onmouseenter(toggleHovered)
    .onmouseleave(toggleHovered);

Example 7

chainability is a key advantage of NodeLists:

dojo.query(".thinger")
    .onclick(function(e){ /* ... */ })
    .at(1, 3, 8) // get a subset
        .style("padding", "5px")
        .forEach(console.log);

Example 8

use native and Dojo-provided array methods to manipulate a NodeList without needing to use dojo.* functions explicitly:

var l = dojo.query(".thinger");
// since NodeLists are real arrays, they have a length
// property that is both readable and writable and
// push/pop/shift/unshift methods
console.log(l.length);
l.push(dojo.create("span"));
 
 
// dojo's normalized array methods work too:
console.log( l.indexOf(dojo.byId("foo")) );
// ...including the special "function as string" shorthand
console.log( l.every("item.nodeType == 1") );
 
 
// NodeLists can be [..] indexed, or you can use the at()
// function to get specific items wrapped in a new NodeList:
var node = l[3]; // the 4th element
var newList = l.at(1, 3); // the 2nd and 4th elements

Jump to PropertiesJump to FunctionsJump to ConstructorsNamespacesBack to top

add a node, NodeList or some HTML as a string to every item in the list. Returns the original list.
gets or sets the DOM attribute for every element in the NodeList. See also dojo.attr
gets or sets the CSS property for every element in the NodeList

Jump to PropertiesJump to FunctionsJump to NamespacesConstructorsBack to top

Jump to PropertiesJump to ConstructorsJump to NamespacesFunctionsBack to top

adds the specified class to every node in the list
FunctionaddClassFx(cssClass, args): dojo.Animation
Animate the effects of adding a class to all nodes in this list. see dojox.fx.addClass
Functionadopt(queryOrListOrNode: String|Array|DomNode, position: String?): dojo.NodeList
places any/all elements in queryOrListOrNode at a position relative to the first element in this list. Returns a dojo.NodeList of the adopted elements.
Functionafter(content: String|Element|NodeList): dojo.NodeList
Places the content after every node in the NodeList.
Adds the nodes from the previous dojo.NodeList to the current dojo.NodeList.
Functionanim(properties: Object, duration: Integer?, easing: Function?, onEnd: Function?, delay: Integer?): dojo._Animation | dojo.Animation
Animate one or more CSS properties for all nodes in this list. The returned animation object will already be playing when it is returned. See the docs for dojo.anim for full details.
see dojo.animateProperty(). Animate all elements of this NodeList across the properties specified.
Functionappend(content: String|DOMNode|NodeList): dojo.NodeList
appends the content to every node in the NodeList.
appends nodes in this NodeList to the nodes matched by the query passed to appendTo.
Returns a new NodeList comprised of items in this NodeList at the given index or indices.
Functionbefore(content: String|DOMNode|NodeList): dojo.NodeList
Places the content before every node in the NodeList.
Functionchildren(query: String?)
Returns all immediate child elements for nodes in this dojo.NodeList. Optionally takes a query to filter the child elements.
Clones all the nodes in this NodeList and returns them as a new NodeList.
Functionclosest(query: String): To make rhino strict checking happy.
Returns closest parent that matches query, including current node in this dojo.NodeList if it matches the query.
Returns a new NodeList comprised of items in this NodeList as well as items passed in as parameters
Functionconnect(methodName: String, objOrFunc: Object|Function|String, funcName: String?)
attach event handlers to every item of the NodeList. Uses dojo.connect() so event properties are normalized
Returns the box objects of all elements in a node list as an Array (*not* a NodeList). Acts like dojo.coords, though assumes the node passed is each node in this list.
Functiondtl(template: dojox.dtl.__StringArgs|String, context: dojox.dtl.__ObjectArgs|Object)
clears all content from each node in the list. Effectively equivalent to removing all child nodes from every item in the list.
Functionend()
Ends use of the current dojo.NodeList by returning the previous dojo.NodeList that generated the current dojo.NodeList.
Returns the even nodes in this dojo.NodeList as a dojo.NodeList.
Functionevery(callback: Function:, thisObject: Object:?): Boolean
see dojo.every() and the (Array.every docs)[http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:every]. Takes the same structure of arguments and returns as dojo.every() with the caveat that the passed array is implicitly this NodeList
fade in all elements of this NodeList. Returns an instance of dojo.Animation
fade out all elements of this NodeList. Returns an instance of dojo.Animation
FunctionfadeTo(args)
fade all elements of the node list to a specified opacity
"masks" the built-in javascript filter() method (supported in Dojo via dojo.filter) to support passing a simple string filter in addition to supporting filtering function objects.
Returns the first node in this dojo.NodeList as a dojo.NodeList.
FunctionforEach(callback, thisObj): dojo.NodeList
see dojo.forEach(). The primary difference is that the acted-on array is implicitly this NodeList. If you want the option to break out of the forEach loop, use every() or some() instead.
highlight all elements of the node list. Returns an instance of dojo.Animation
Functionhtml(content, params: Object?): dojo.NodeList | String
see the information for "innerHTML". "html" is an alias for "innerHTML", but is only defined if dojo.NodeList-html has not been loaded.
FunctionindexOf(value: Object:, fromIndex: Integer:?): Integer
see dojo.indexOf(). The primary difference is that the acted-on array is implicitly this NodeList
allows setting the innerHTML of each node in the NodeList, if there is a value passed in, otherwise, reads the innerHTML value of the first node.
The nodes in this NodeList will be placed after the nodes matched by the query passed to insertAfter.
The nodes in this NodeList will be placed after the nodes matched by the query passed to insertAfter.
Functioninstantiate(declaredClass: String|Object, properties: Object?): dojo.NodeList
Create a new instance of a specified class, using the specified properties and each node in the nodeList as a srcNodeRef.
Returns the last node in this dojo.NodeList as a dojo.NodeList.
FunctionlastIndexOf(value: Object, fromIndex: Integer?): Integer
see dojo.lastIndexOf(). The primary difference is that the acted-on array is implicitly this NodeList
see dojo.map(). The primary difference is that the acted-on array is implicitly this NodeList and the return is a dojo.NodeList (a subclass of Array) /return d.map(this, func, obj, d.NodeList); // dojo.NodeList
Functionnext(query: String?)
Returns the next element for nodes in this dojo.NodeList. Optionally takes a query to filter the next elements.
FunctionnextAll(query: String?)
Returns all sibling elements that come after the nodes in this dojo.NodeList. Optionally takes a query to filter the sibling elements.
Functionodd()
Returns the odd nodes in this dojo.NodeList as a dojo.NodeList.
Functionorphan(simpleFilter: String?): dojo.NodeList
removes elements in this list that match the simple filter from their parents and returns them as a new NodeList.
Functionparent(query: String?)
Returns immediate parent elements for nodes in this dojo.NodeList. Optionally takes a query to filter the parent elements.
Functionparents(query: String?)
Returns all parent elements for nodes in this dojo.NodeList. Optionally takes a query to filter the child elements.
Functionplace(queryOrNode: String|Node, position: String): dojo.NodeList
places elements of this node list relative to the first element matched by queryOrNode. Returns the original NodeList. See: dojo.place
Returns border-box objects (x/y/w/h) of all elements in a node list as an Array (*not* a NodeList). Acts like dojo.position, though assumes the node passed is each node in this list.
Functionprepend(content: String|DOMNode|NodeList): dojo.NodeList
prepends the content to every node in the NodeList.
prepends nodes in this NodeList to the nodes matched by the query passed to prependTo.
Functionprev(query: String?)
Returns the previous element for nodes in this dojo.NodeList. Optionally takes a query to filter the previous elements.
FunctionprevAll(query: String?)
Returns all sibling elements that come before the nodes in this dojo.NodeList. Optionally takes a query to filter the sibling elements.
Returns a new list whose memebers match the passed query, assuming elements of the current NodeList as the root for each search.
Functionremove(simpleFilter: String): dojo.NodeList
alias for dojo.NodeList's orphan method. Removes elements in this list that match the simple filter from their parents and returns them as a new NodeList.
removes the specified class from every node in the list
FunctionremoveClassFx(cssClass, args): dojo.Animation
Animate the effect of removing a class to all nodes in this list. see dojox.fx.removeClass
replaces nodes matched by the query passed to replaceAll with the nodes in this NodeList.
Replaces each node in ths NodeList with the content passed to replaceWith.
Functionsiblings(query: String?)
Returns all sibling elements for nodes in this dojo.NodeList. Optionally takes a query to filter the sibling elements.
size all elements of this NodeList. Returns an instance of dojo.Animation
Functionslice(begin: Integer, end: Integer?)
Returns a new NodeList, maintaining this one in place
slide all elements of this NodeList. Returns an instance of dojo.Animation
slide all elements of the node list to the specified place. Returns an instance of dojo.Animation
Functionsome(callback: Function:, thisObject: Object:?): Boolean
Takes the same structure of arguments and returns as dojo.some() with the caveat that the passed array is implicitly this NodeList. See dojo.some() and Mozilla's (Array.some documentation)[http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:some].
Functionsplice(index: Integer, howmany: Integer?, item: Object?)
Returns a new NodeList, manipulating this NodeList based on the arguments passed, potentially splicing in new elements at an offset, optionally deleting elements
allows setting the text value of each node in the NodeList, if there is a value passed in, otherwise, returns the text value for all the nodes in the NodeList in one string.
FunctiontoggleClass(className: String, condition: Boolean?): dojo.NodeList
Adds a class to node if not present, or removes if present. Pass a boolean condition if you want to explicitly add or remove.
FunctiontoggleClassFx(cssClass, force, args): dojo.Animation
Animate the effect of adding or removing a class to all nodes in this list. see dojox.fx.toggleClass
wipe in all elements of this NodeList. Returns an instance of dojo.Animation
wipe out all elements of this NodeList. Returns an instance of dojo.Animation
FunctionwipeTo(args)
Wipe all elements of the NodeList to a specified width: or height:
Wrap each node in the NodeList with html passed to wrap.
Insert html where the first node in this NodeList lives, then place all nodes in this NodeList as the child of the html.
For each node in the NodeList, wrap all its children with the passed in html.
Function_anim(obj, method, args)
builds a new array of possibly differing size based on the input list. Since the returned array is likely of different size than the input array, the array's map function cannot be used.
private utiltity to clone a node. Not very interesting in the vanilla dojo.NodeList case, but delegates could do interesting things like clone event handlers if that is derivable from the node.
cycles over all the nodes and calls a callback to collect nodes for a possible inclusion in a result. The callback will get two args: callback(node, ary), where ary is the array being used to collect the nodes.
given a list of nodes, make sure only unique elements are returned as our NodeList object. Does not call _stash().
gets unique element nodes, filters them further with an optional query and then calls _stash to track parent NodeList.
Function_normalize(content: String|Element|Object|NodeList, refNode: DOMNode?): Array
normalizes data to an array of items to insert.
Function_place(ary: Array, refNode: DOMNode, position: String, useClone: Boolean)
private utility to handle placing an array of nodes relative to another node.

Jump to FunctionsJump to ConstructorsJump to NamespacesPropertiesBack to top