dojo/NodeList

Summary

Array-like object which adds syntactic sugar for chaining, common iteration operations, animation, and node manipulation. NodeLists are most often returned as the result of dojo/query() calls.

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 package, NodeLists generally make the full power of Dojo available for DOM manipulation tasks in a simple, chainable way.

Usage

NodeList(array);
Parameter Type Description
array undefined

Returns: Array

See the dojo/NodeList reference documentation for more information.

Examples

Example 1

create a node list from a node

require(["dojo/query", "dojo/dom"
], function(query, dom){
    query.NodeList(dom.byId("foo"));
});

Example 2

get a NodeList from a CSS query and iterate on it

require(["dojo/on", "dojo/dom"
], function(on, dom){
    var l = 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:

require(["dojo/query", "dojo/dom-construct", "dojo/dom"
], function(query, domConstruct, dom){
    var l = 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(domConstruct.create("span"));

    // dojo's normalized array methods work too:
    console.log( l.indexOf(dom.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

chainability is a key advantage of NodeLists:

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

Properties

events

Defined by: dojo/_base/NodeList

Methods

addClass(className)

Defined by dojo/NodeList-dom

adds the specified class to every node in the list

Parameter Type Description
className String | Array

A String class name to add, or several space-separated class names, or an array of class names.

addClassFx(cssClass,args)

Defined by dojox/fx/ext-dojo/NodeList-style

Animate the effects of adding a class to all nodes in this list. see dojox.fx.addClass

Parameter Type Description
cssClass undefined
args undefined

Returns: [object Value(type: function, value: undefined)]

Examples

Example 1

// fade all elements with class "bar" to to 50% opacity
dojo.query(".bar").addClassFx("bar").play();

addContent(content,position)

Defined by dojo/NodeList-dom

add a node, NodeList or some HTML as a string to every item in the list. Returns the original list.

a copy of the HTML content is added to each item in the list, with an optional position argument. If no position argument is provided, the content is appended to the end of each item.

Parameter Type Description
content String | DomNode | Object | dojo/NodeList

the content to be set on the parent element. This can be an html string, a node reference or a NodeList, dojo/NodeList, Array or other enumerable list of nodes

position String | Integer
Optional

can be one of:

  • "last"||"end" (default)
  • "first||"start"
  • "before"
  • "after"
  • "replace" (replaces nodes in this NodeList with new content)
  • "only" (removes other children of the nodes so new content is the only child)

or an offset in the childNodes property

Returns: function

add a node, NodeList or some HTML as a string to every item in the list. Returns the original list.

Examples

Example 1

appends content to the end if the position is omitted

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query("h3 > p").addContent("hey there!");
});

Example 2

add something to the front of each element that has a "thinger" property:

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query("[thinger]").addContent("...", "first");
});

Example 3

adds a header before each element of the list

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query(".note").addContent("<h4>NOTE:</h4>", "before");
});

Example 4

add a clone of a DOM node to the end of every element in the list, removing it from its existing parent.

require(["dojo/dom", "dojo/query", "dojo/NodeList-dom"
], function(dom, query){
    query(".note").addContent(dom.byId("foo"));
});

Example 5

Append nodes from a templatized string.

require(["dojo/string", "dojo/query", "dojo/NodeList-dom"
], function(string, query){
    query(".note").addContent({
        template: '<b>${id}: </b><span>${name}</span>',
        id: "user332",
        name: "Mr. Anderson"
    });
});

Example 6

Append nodes from a templatized string that also has widgets parsed.

require(["dojo/string", "dojo/parser", "dojo/query", "dojo/NodeList-dom"
], function(string, parser, query){
    var notes = query(".note").addContent({
        template: '<button dojoType="dijit/form/Button">${text}</button>',
        parse: true,
        text: "Send"
    });
});

adopt(queryOrListOrNode,position)

Defined by dojo/NodeList-dom

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.

Parameter Type Description
queryOrListOrNode String | Array | DomNode

a DOM node or a query string or a query result. Represents the nodes to be adopted relative to the first element of this NodeList.

position String
Optional

can be one of:

  • "last" (default)
  • "first"
  • "before"
  • "after"
  • "only"
  • "replace"

or an offset in the childNodes property

Returns: undefined

after(content)

Defined by dojo/NodeList-manipulate

Places the content after every node in the NodeList.

The content will be cloned if the length of NodeList is greater than 1. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
content String | Element | NodeList

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the appended content.

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").after("<span>after</span>");
});

Results in this DOM structure:

<div id="foo"><p>Hello Mars</p></div><span>after</span>
<div id="bar"><p>Hello World</p></div><span>after</span>

andSelf()

Defined by dojo/NodeList-traverse

Adds the nodes from the previous dojo/NodeList to the current dojo/NodeList.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Returns: undefined

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red prev">Red One</div>
    Some Text
    <div class="blue prev">Blue One</div>
    <div class="red second">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".second").prevAll().andSelf();
});

returns the two divs with class of "prev", as well as the div with class "second".

anim(properties,duration,easing,onEnd,delay)

Defined by dojo/NodeList-fx

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.

Parameter Type Description
properties Object

the properties to animate. does NOT support the auto parameter like other NodeList-fx methods.

duration Integer
Optional

Optional. The time to run the animations for

easing Function
Optional

Optional. The easing function to use.

onEnd Function
Optional

A function to be called when the animation ends

delay Integer
Optional

how long to delay playing the returned animation

Returns: undefined

Examples

Example 1

Another way to fade out:

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".thinger").anim({ opacity: 0 });
});

Example 2

animate all elements with the "thigner" class to a width of 500 pixels over half a second

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".thinger").anim({ width: 500 }, 700);
});

animateProperty(args)

Defined by dojo/NodeList-fx

Animate all elements of this NodeList across the properties specified. syntax identical to dojo.animateProperty

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".zork").animateProperty({
        duration: 500,
        properties: {
            color:      { start: "black", end: "white" },
            left:       { end: 300 }
        }
    }).play();
});

Example 2

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".grue").animateProperty({
        auto:true,
        properties: {
            height:240
        }
    }).onclick(handler);
});

append(content)

Defined by dojo/NodeList-manipulate

appends the content to every node in the NodeList.

The content will be cloned if the length of NodeList is greater than 1. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
content String | DOMNode | NodeList

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the appended content.

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").append("<span>append</span>");
});

Results in this DOM structure:

<div id="foo"><p>Hello Mars</p><span>append</span></div>
<div id="bar"><p>Hello World</p><span>append</span></div>

appendTo(query)

Defined by dojo/NodeList-manipulate

appends nodes in this NodeList to the nodes matched by the query passed to appendTo.

The nodes in this NodeList will be cloned if the query matches more than one element. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
query String

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the matched nodes from the query.

Examples

Example 1

assume a DOM created by this markup:

<span>append</span>
<p>Hello Mars</p>
<p>Hello World</p>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("span").appendTo("p");
});

Results in this DOM structure:

<p>Hello Mars<span>append</span></p>
<p>Hello World<span>append</span></p>

at(index)

Defined by dojo/query

Returns a new NodeList comprised of items in this NodeList at the given index or indices.

Parameter Type Description
index Integer...

One or more 0-based indices of items in the current NodeList. A negative index will start at the end of the list and go backwards.

Returns: undefined

Examples

Example 1

Shorten the list to the first, second, and third elements

require(["dojo/query"
], function(query){
    query("a").at(0, 1, 2).forEach(fn);
});

Example 2

Retrieve the first and last elements of a unordered list:

require(["dojo/query"
], function(query){
    query("ul > li").at(0, -1).forEach(cb);
});

Example 3

Do something for the first element only, but end() out back to the original list and continue chaining:

require(["dojo/query"
], function(query){
    query("a").at(0).onclick(fn).end().forEach(function(n){
        console.log(n); // all anchors on the page.
})
});

attr(property,value)

Defined by dojo/NodeList-dom

gets or sets the DOM attribute for every element in the NodeList. See also dojo/dom-attr

Parameter Type Description
property String

the attribute to get/set

value String
Optional

optional. The value to set the property to

Returns: any

if no value is passed, the result is an array of attribute values If a value is passed, the return is this NodeList

Examples

Example 1

Make all nodes with a particular class focusable:

require(["dojo/query", "dojo/NodeList-dom"], function(query){
    query(".focusable").attr("tabIndex", -1);
});

Example 2

Disable a group of buttons:

require(["dojo/query", "dojo/NodeList-dom"], function(query){
    query("button.group").attr("disabled", true);
});

Example 3

innerHTML can be assigned or retrieved as well:

// get the innerHTML (as an array) for each list item
require(["dojo/query", "dojo/NodeList-dom"], function(query){
    var ih = query("li.replaceable").attr("innerHTML");
});

before(content)

Defined by dojo/NodeList-manipulate

Places the content before every node in the NodeList.

The content will be cloned if the length of NodeList is greater than 1. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
content String | DOMNode | NodeList

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the appended content.

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").before("<span>before</span>");
});

Results in this DOM structure:

<span>before</span><div id="foo"><p>Hello Mars</p></div>
<span>before</span><div id="bar"><p>Hello World</p></div>

children(query)

Defined by dojo/NodeList-traverse

Returns all immediate child elements for nodes in this dojo/NodeList. Optionally takes a query to filter the child elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

all immediate child elements for the nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".container").children();
});

returns the four divs that are children of the container div.

Running this code:

dojo.query(".container").children(".red");

returns the two divs that have the class "red".

clone()

Defined by dojo/NodeList-manipulate

Clones all the nodes in this NodeList and returns them as a new NodeList.

Only the DOM nodes are cloned, not any attached event handlers.

Returns: any | undefined

a cloned set of the original nodes.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query(".red").clone().appendTo(".container");
});

Results in this DOM structure:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
    <div class="red">Red One</div>
    <div class="red">Red Two</div>
</div>

closest(query,root)

Defined by dojo/NodeList-traverse

Returns closest parent that matches query, including current node in this dojo/NodeList if it matches the query.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String

a CSS selector.

root String | DOMNode
Optional

If specified, query is relative to "root" rather than document body.

Returns: any | undefined

the closest parent that matches the query, including the current node in this dojo/NodeList if it matches the query.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".red").closest(".container");
});

returns the div with class "container".

concat(item)

Defined by dojo/query

Returns a new NodeList comprised of items in this NodeList as well as items passed in as parameters

This method behaves exactly like the Array.concat method with the caveat that it returns a NodeList and not a raw Array. For more details, see the Array.concat docs

Parameter Type Description
item Object
Optional

Any number of optional parameters may be passed in to be spliced into the NodeList

Returns: undefined

connect(methodName,objOrFunc,funcName)

Defined by dojo/_base/NodeList

Attach event handlers to every item of the NodeList. Uses dojo.connect() so event properties are normalized.

Application must manually require() "dojo/_base/connect" before using this method.

Parameter Type Description
methodName String

the name of the method to attach to. For DOM events, this should be the lower-case name of the event

objOrFunc Object | Function | String

if 2 arguments are passed (methodName, objOrFunc), objOrFunc should reference a function or be the name of the function in the global namespace to attach. If 3 arguments are provided (methodName, objOrFunc, funcName), objOrFunc must be the scope to locate the bound function in

funcName String
Optional

optional. A string naming the function in objOrFunc to bind to the event. May also be a function reference.

Examples

Example 1

add an onclick handler to every button on the page

query("div:nth-child(odd)").connect("onclick", function(e){
    console.log("clicked!");
});

Example 2

attach foo.bar() to every odd div's onmouseover

query("div:nth-child(odd)").connect("onmouseover", foo, "bar");

coords()

Defined by dojo/_base/NodeList

Deprecated: Use position() for border-box x/y/w/h or marginBox() for margin-box w/h/l/t. Returns the box objects of all elements in a node list as an Array (not a NodeList). Acts like domGeom.coords, though assumes the node passed is each node in this list.

data(key,value)

Defined by dojo/NodeList-data

stash or get some arbitrary data on/from these nodes.

Stash or get some arbitrary data on/from these nodes. This private _data function is exposed publicly on dojo/NodeList, eg: as the result of a dojo/query call. DIFFERS from jQuery.data in that when used as a getter, the entire list is ALWAYS returned. EVEN WHEN THE LIST IS length == 1.

A single-node version of this function is provided as dojo._nodeData, which follows the same signature, though expects a String ID or DomNode reference in the first position, before key/value arguments.

Parameter Type Description
key Object | String
Optional

If an object, act as a setter and iterate over said object setting data items as defined. If a string, and value present, set the data for defined key to value If a string, and value absent, act as a getter, returning the data associated with said key

value Anything
Optional

The value to set for said key, provided key is a string (and not an object)

Returns: Object|Anything|Nothing

When used as a setter via dojo/NodeList, a NodeList instance is returned for further chaining. When used as a getter via dojo/NodeList an ARRAY of items is returned. The items in the array correspond to the elements in the original list. This is true even when the list length is 1, eg: when looking up a node by ID (#foo)

Examples

Example 1

Set a key bar to some data, then retrieve it.

require(["dojo/query", "dojo/NodeList-data"], function(query){
    query(".foo").data("bar", "touched");
    var touched = query(".foo").data("bar");
    if(touched[0] == "touched"){ alert('win'); }
});

Example 2

Get all the data items for a given node.

require(["dojo/query", "dojo/NodeList-data"], function(query){
    var list = query(".foo").data();
    var first = list[0];
});

Example 3

Set the data to a complex hash. Overwrites existing keys with new value

require(["dojo/query", "dojo/NodeList-data"], function(query){
    query(".foo").data({ bar:"baz", foo:"bar" });

Then get some random key:

query(".foo").data("foo"); // returns [`bar`]
});

delegate(selector,eventName,fn)

Defined by dojox/NodeList/delegate

Monitor nodes in this NodeList for [bubbled] events on nodes that match selector. Calls fn(evt) for those events, where (inside of fn()), this == the node that matches the selector.

Sets up event handlers that can catch events on any subnodes matching a given selector, including nodes created after delegate() has been called.

This allows an app to setup a single event handler on a high level node, rather than many event handlers on subnodes. For example, one onclick handler for a Tree widget, rather than separate handlers for each node in the tree. Since setting up many event handlers is expensive, this can increase performance.

Note that delegate() will not work for events that don't bubble, like focus. onmouseenter/onmouseleave also don't currently work.

Parameter Type Description
selector String

CSS selector valid to dojo.query, like ".foo" or "div > span". The selector is relative to the nodes in this NodeList, not the document root. For example myNodeList.delegate("> a", "onclick", ...) will catch events on anchor nodes which are (immediate) children of the nodes in myNodeList.

eventName String

Standard event name used as an argument to dojo.connect, like "onclick".

fn Function

Callback function passed the event object, and where this == the node that matches the selector. That means that for example, after setting up a handler via

dojo.query("body").delegate("fieldset", "onclick", ...)

clicking on a fieldset or any nodes inside of a fieldset will be reported

as a click on the fieldset itself.

Returns: undefined

Examples

Example 1

dojo.query("navbar").delegate("a", "onclick", function(evt){
        console.log("user clicked anchor ", this.node);
});

dtl(template,context)

Defined by dojox/dtl/ext-dojo/NodeList

Renders the specified template in each of the NodeList entries.

Parameter Type Description
template dojox/dtl/__StringArgs | String

The template string or location

context dojox/dtl/__ObjectArgs | Object

The context object or location

Returns: function

Renders the specified template in each of the NodeList entries.

empty()

Defined by dojo/NodeList-dom

clears all content from each node in the list. Effectively equivalent to removing all child nodes from every item in the list.

Returns: undefined

end()

Defined by dojo/query

Ends use of the current NodeList by returning the previous NodeList that generated the current NodeList.

Returns the NodeList that generated the current NodeList. If there is no parent NodeList, an empty NodeList is returned.

Returns: undefined | instance

Examples

Example 1

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query("a")
        .filter(".disabled")
            // operate on the anchors that only have a disabled class
            .style("color", "grey")
        .end()
        // jump back to the list of anchors
        .style(...)
});

even()

Defined by dojo/NodeList-traverse

Returns the even nodes in this dojo/NodeList as a dojo/NodeList.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Returns: any | undefined

the even nodes in this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="interior red">Red One</div>
    <div class="interior blue">Blue One</div>
    <div class="interior red">Red Two</div>
    <div class="interior blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".interior").even();
});

returns the two divs with class "blue"

every(callback,thisObject)

Defined by dojo/query

see dojo/_base/array.every() and the Array.every docs. Takes the same structure of arguments and returns as dojo/_base/array.every() with the caveat that the passed array is implicitly this NodeList

Parameter Type Description
callback Function

the callback

thisObject Object
Optional

the context

Returns: undefined

fadeIn(args)

Defined by dojo/NodeList-fx

fade in all elements of this NodeList via dojo.fadeIn

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

Fade in all tables with class "blah":

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query("table.blah").fadeIn().play();
});

fadeOut(args)

Defined by dojo/NodeList-fx

fade out all elements of this NodeList via dojo.fadeOut

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

Fade out all elements with class "zork":

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".zork").fadeOut().play();
});

Example 2

Fade them on a delay and do something at the end:

require(["dojo/query", "dojo/aspect", "dojo/NodeList-fx"
], function(query, aspect){
    var fo = query(".zork").fadeOut();
    aspect.after(fo, "onEnd", function(){ /*...*/ }, true);
    fo.play();
});

Example 3

Using auto:

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query("li").fadeOut({ auto:true }).filter(filterFn).forEach(doit);
});

filter(filter)

Defined by dojo/NodeList-dom

"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.

Parameter Type Description
filter String | Function

If a string, a CSS rule like ".thinger" or "div > span".

Returns: undefined

Examples

Example 1

"regular" JS filter syntax as exposed in dojo.filter:

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query("*").filter(function(item){
        // highlight every paragraph
        return (item.nodeName == "p");
    }).style("backgroundColor", "yellow");
});

Example 2

the same filtering using a CSS selector

require(["dojo/query", "dojo/NodeList-dom"
], function(query){
    query("*").filter("p").styles("backgroundColor", "yellow");
});

first()

Defined by dojo/NodeList-traverse

Returns the first node in this dojo/NodeList as a dojo/NodeList.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Returns: any | undefined

the first node in this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue first">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue last">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".blue").first();
});

returns the div with class "blue" and "first".

forEach(callback,thisObj)

Defined by dojo/query

see dojo/_base/array.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.

Parameter Type Description
callback undefined
thisObj undefined

Returns: function

see dojo/_base/array.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.

html(value)

Defined by dojo/NodeList-manipulate

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.

This method is simpler than the dojo/NodeList.html() method provided by dojo/NodeList-html. This method just does proper innerHTML insertion of HTML fragments, and it allows for the innerHTML to be read for the first node in the node list. Since dojo/NodeList-html already took the "html" name, this method is called "innerHTML". However, if dojo/NodeList-html has not been loaded yet, this module will define an "html" method that can be used instead. Be careful if you are working in an environment where it is possible that dojo/NodeList-html could have been loaded, since its definition of "html" will take precedence. The nodes represented by the value argument will be cloned if more than one node is in this NodeList. The nodes in this NodeList are returned in the "set" usage of this method, not the HTML that was inserted.

Parameter Type Description
value String | DOMNode | NodeList
Optional

Returns: any | undefined

if no value is passed, the result is String, the innerHTML of the first node. If a value is passed, the return is this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"></div>
<div id="bar"></div>

This code inserts <p>Hello World</p> into both divs:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").innerHTML("<p>Hello World</p>");
});

Example 2

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

This code returns <p>Hello Mars</p>:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    var message = query("div").innerHTML();
});

indexOf(value,fromIndex)

Defined by dojo/query

see dojo/_base/array.indexOf(). The primary difference is that the acted-on array is implicitly this NodeList

For more details on the behavior of indexOf, see Mozilla's indexOf docs

Parameter Type Description
value Object

The value to search for.

fromIndex Integer
Optional

The location to start searching from. Optional. Defaults to 0.

Returns: any | undefined

Positive Integer or 0 for a match, -1 of not found.

innerHTML(value)

Defined by dojo/NodeList-manipulate

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.

This method is simpler than the dojo/NodeList.html() method provided by dojo/NodeList-html. This method just does proper innerHTML insertion of HTML fragments, and it allows for the innerHTML to be read for the first node in the node list. Since dojo/NodeList-html already took the "html" name, this method is called "innerHTML". However, if dojo/NodeList-html has not been loaded yet, this module will define an "html" method that can be used instead. Be careful if you are working in an environment where it is possible that dojo/NodeList-html could have been loaded, since its definition of "html" will take precedence. The nodes represented by the value argument will be cloned if more than one node is in this NodeList. The nodes in this NodeList are returned in the "set" usage of this method, not the HTML that was inserted.

Parameter Type Description
value String | DOMNode | NodeList
Optional

Returns: any | undefined

if no value is passed, the result is String, the innerHTML of the first node. If a value is passed, the return is this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"></div>
<div id="bar"></div>

This code inserts <p>Hello World</p> into both divs:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").innerHTML("<p>Hello World</p>");
});

Example 2

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

This code returns <p>Hello Mars</p>:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    var message = query("div").innerHTML();
});

insertAfter(query)

Defined by dojo/NodeList-manipulate

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 cloned if the query matches more than one element. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
query String

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the matched nodes from the query.

Examples

Example 1

assume a DOM created by this markup:

<span>after</span>
<p>Hello Mars</p>
<p>Hello World</p>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("span").insertAfter("p");
});

Results in this DOM structure:

<p>Hello Mars</p><span>after</span>
<p>Hello World</p><span>after</span>

insertBefore(query)

Defined by dojo/NodeList-manipulate

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 cloned if the query matches more than one element. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
query String

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the matched nodes from the query.

Examples

Example 1

assume a DOM created by this markup:

<span>before</span>
<p>Hello Mars</p>
<p>Hello World</p>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("span").insertBefore("p");
});

Results in this DOM structure:

<span>before</span><p>Hello Mars</p>
<span>before</span><p>Hello World</p>

instantiate(declaredClass,properties)

Defined by dojo/query

Create a new instance of a specified class, using the specified properties and each node in the NodeList as a srcNodeRef.

Parameter Type Description
declaredClass String | Object
properties Object
Optional

Returns: undefined

Examples

Example 1

Grabs all buttons in the page and converts them to dijit/form/Button's.

var buttons = query("button").instantiate(Button, {showLabel: true});

last()

Defined by dojo/NodeList-traverse

Returns the last node in this dojo/NodeList as a dojo/NodeList.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Returns: any | undefined

the last node in this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue first">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue last">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
query(".blue").last();
});

returns the last div with class "blue",

lastIndexOf(value,fromIndex)

Defined by dojo/query

see dojo/_base/array.lastIndexOf(). The primary difference is that the acted-on array is implicitly this NodeList

For more details on the behavior of lastIndexOf, see Mozilla's lastIndexOf docs

Parameter Type Description
value Object

The value to search for.

fromIndex Integer
Optional

The location to start searching from. Optional. Defaults to 0.

Returns: any | undefined

Positive Integer or 0 for a match, -1 of not found.

map(func,obj)

Defined by dojo/query

see dojo/_base/array.map(). The primary difference is that the acted-on array is implicitly this NodeList and the return is a NodeList (a subclass of Array)

Parameter Type Description
func Function
obj Function
Optional

Returns: undefined

marginBox()

Defined by dojo/NodeList-dom

Returns margin-box size of nodes

next(query)

Defined by dojo/NodeList-traverse

Returns the next element for nodes in this dojo/NodeList. Optionally takes a query to filter the next elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

the next element for nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue first">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue last">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".first").next();
});

returns the div with class "red" and has innerHTML of "Red Two".

Running this code:

dojo.query(".last").next(".red");

does not return any elements.

nextAll(query)

Defined by dojo/NodeList-traverse

Returns all sibling elements that come after the nodes in this dojo/NodeList. Optionally takes a query to filter the sibling elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

all sibling elements that come after the nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue first">Blue One</div>
    <div class="red next">Red Two</div>
    <div class="blue next">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".first").nextAll();
});

returns the two divs with class of "next".

Running this code:

query(".first").nextAll(".red");

returns the one div with class "red" and innerHTML "Red Two".

odd()

Defined by dojo/NodeList-traverse

Returns the odd nodes in this dojo/NodeList as a dojo/NodeList.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Returns: any | undefined

the odd nodes in this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="interior red">Red One</div>
    <div class="interior blue">Blue One</div>
    <div class="interior red">Red Two</div>
    <div class="interior blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".interior").odd();
});

returns the two divs with class "red"

on(eventName,listener)

Defined by dojo/query

Listen for events on the nodes in the NodeList. Basic usage is:

Parameter Type Description
eventName undefined
listener undefined

Returns: undefined

Examples

Example 1

require(["dojo/query"
], function(query){
    query(".my-class").on("click", listener);

This supports event delegation by using selectors as the first argument with the event names as

pseudo selectors. For example:

query("#my-list").on("li:click", listener);

This will listen for click events within <li> elements that are inside the #my-list element.

Because on supports CSS selector syntax, we can use comma-delimited events as well:

query("#my-list").on("li button:mouseover, li:click", listener);
});

orphan(filter)

Defined by dojo/NodeList-dom

removes elements in this list that match the filter from their parents and returns them as a new NodeList.

Parameter Type Description
filter String
Optional

CSS selector like ".foo" or "div > span"

Returns: any | undefined

NodeList containing the orphaned elements

parent(query)

Defined by dojo/NodeList-traverse

Returns immediate parent elements for nodes in this dojo/NodeList. Optionally takes a query to filter the parent elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

immediate parent elements for nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue first"><span class="text">Blue One</span></div>
    <div class="red">Red Two</div>
    <div class="blue"><span class="text">Blue Two</span></div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".text").parent();
});

returns the two divs with class "blue".

Running this code:

query(".text").parent(".first");

returns the one div with class "blue" and "first".

parents(query)

Defined by dojo/NodeList-traverse

Returns all parent elements for nodes in this dojo/NodeList. Optionally takes a query to filter the child elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

all parent elements for nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue first"><span class="text">Blue One</span></div>
    <div class="red">Red Two</div>
    <div class="blue"><span class="text">Blue Two</span></div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".text").parents();
});

returns the two divs with class "blue", the div with class "container",

the body element and the html element.

Running this code:

query(".text").parents(".container");

returns the one div with class "container".

place(queryOrNode,position)

Defined by dojo/NodeList-dom

places elements of this node list relative to the first element matched by queryOrNode. Returns the original NodeList. See: dojo/dom-construct.place

Parameter Type Description
queryOrNode String | Node

may be a string representing any valid CSS3 selector or a DOM node. In the selector case, only the first matching element will be used for relative positioning.

position String

can be one of:

  • "last" (default)
  • "first"
  • "before"
  • "after"
  • "only"
  • "replace"

or an offset in the childNodes property

Returns: undefined

position()

Defined by dojo/NodeList-dom

Returns border-box objects (x/y/w/h) of all elements in a node list as an Array (not a NodeList). Acts like dojo/dom-geometry-position, though assumes the node passed is each node in this list.

Returns: undefined

prepend(content)

Defined by dojo/NodeList-manipulate

prepends the content to every node in the NodeList.

The content will be cloned if the length of NodeList is greater than 1. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
content String | DOMNode | NodeList

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the appended content. assume a DOM created by this markup:

<div id="foo"><p>Hello Mars</p></div>
<div id="bar"><p>Hello World</p></div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").prepend("<span>prepend</span>");
});

Results in this DOM structure:

<div id="foo"><span>prepend</span><p>Hello Mars</p></div>
<div id="bar"><span>prepend</span><p>Hello World</p></div>

prependTo(query)

Defined by dojo/NodeList-manipulate

prepends nodes in this NodeList to the nodes matched by the query passed to prependTo.

The nodes in this NodeList will be cloned if the query matches more than one element. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
query String

Returns: any | undefined

dojo/NodeList, the nodes currently in this NodeList will be returned, not the matched nodes from the query.

Examples

Example 1

assume a DOM created by this markup:

<span>prepend</span>
<p>Hello Mars</p>
<p>Hello World</p>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("span").prependTo("p");
});

Results in this DOM structure:

<p><span>prepend</span>Hello Mars</p>
<p><span>prepend</span>Hello World</p>

prev(query)

Defined by dojo/NodeList-traverse

Returns the previous element for nodes in this dojo/NodeList. Optionally takes a query to filter the previous elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

the previous element for nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue first">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".first").prev();
});

returns the div with class "red" and has innerHTML of "Red One".

Running this code:

query(".first").prev(".blue");

does not return any elements.

prevAll(query)

Defined by dojo/NodeList-traverse

Returns all sibling elements that come before the nodes in this dojo/NodeList. Optionally takes a query to filter the sibling elements.

The returned nodes will be in reverse DOM order -- the first node in the list will be the node closest to the original node/NodeList. .end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

all sibling elements that come before the nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red prev">Red One</div>
    Some Text
    <div class="blue prev">Blue One</div>
    <div class="red second">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".second").prevAll();
});

returns the two divs with class of "prev".

Running this code:

query(".first").prevAll(".red");

returns the one div with class "red prev" and innerHTML "Red One".

query(queryStr)

Defined by dojo/NodeList-dom

Returns a new list whose members match the passed query, assuming elements of the current NodeList as the root for each search.

Parameter Type Description
queryStr String

Returns: function | undefined

Returns a new list whose members match the passed query, assuming elements of the current NodeList as the root for each search.

Examples

Example 1

assume a DOM created by this markup:

<div id="foo">
    <p>
        bacon is tasty, <span>dontcha think?</span>
    </p>
</div>
<div id="bar">
    <p>great comedians may not be funny <span>in person</span></p>
</div>

If we are presented with the following definition for a NodeList:

require(["dojo/dom", "dojo/query", "dojo/NodeList-dom"
], function(dom, query){
    var l = new NodeList(dom.byId("foo"), dom.byId("bar"));

it's possible to find all span elements under paragraphs

contained by these elements with this sub-query:

var spans = l.query("p span");
});

remove(filter)

Defined by dojo/NodeList-manipulate

removes elements in this list that match the filter from their parents and returns them as a new NodeList.

Parameter Type Description
filter String
Optional

CSS selector like ".foo" or "div > span"

Returns: any | undefined

NodeList containing the orphaned elements

removeAttr(name)

Defined by dojo/NodeList-dom

Removes an attribute from each node in the list.

Parameter Type Description
name String

the name of the attribute to remove

removeClass(className)

Defined by dojo/NodeList-dom

removes the specified class from every node in the list

Parameter Type Description
className String | Array
Optional

An optional String class name to remove, or several space-separated class names, or an array of class names. If omitted, all class names will be deleted.

Returns: any

this list

removeClassFx(cssClass,args)

Defined by dojox/fx/ext-dojo/NodeList-style

Animate the effect of removing a class to all nodes in this list. see dojox.fx.removeClass

Parameter Type Description
cssClass undefined
args undefined

Returns: [object Value(type: function, value: undefined)]

Examples

Example 1

dojo.query(".box").removeClassFx("bar").play();

removeData(key)

Defined by dojo/NodeList-data

Remove the data associated with these nodes.

Parameter Type Description
key String
Optional

If omitted, clean all data for this node. If passed, remove the data item found at key

replaceAll(query)

Defined by dojo/NodeList-manipulate

replaces nodes matched by the query passed to replaceAll with the nodes in this NodeList.

The nodes in this NodeList will be cloned if the query matches more than one element. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
query String

Returns: any | function

The nodes currently in this NodeList will be returned, not the matched nodes from the query. The nodes currently in this NodeLIst could have been cloned, so the returned NodeList will include the cloned nodes.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="spacer">___</div>
    <div class="red">Red One</div>
    <div class="spacer">___</div>
    <div class="blue">Blue One</div>
    <div class="spacer">___</div>
    <div class="red">Red Two</div>
    <div class="spacer">___</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query(".red").replaceAll(".blue");
});

Results in this DOM structure:

<div class="container">
    <div class="spacer">___</div>
    <div class="spacer">___</div>
    <div class="red">Red One</div>
    <div class="red">Red Two</div>
    <div class="spacer">___</div>
    <div class="spacer">___</div>
    <div class="red">Red One</div>
    <div class="red">Red Two</div>
</div>

replaceClass(addClassStr,removeClassStr)

Defined by dojo/NodeList-dom

Replaces one or more classes on a node if not present. Operates more quickly than calling removeClass() and addClass()

Parameter Type Description
addClassStr String | Array

A String class name to add, or several space-separated class names, or an array of class names.

removeClassStr String | Array
Optional

A String class name to remove, or several space-separated class names, or an array of class names.

replaceWith(content)

Defined by dojo/NodeList-manipulate

Replaces each node in ths NodeList with the content passed to replaceWith.

The content will be cloned if the length of NodeList is greater than 1. Only the DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
content String | DOMNode | NodeList

Returns: any | function

The nodes currently in this NodeList will be returned, not the replacing content. Note that the returned nodes have been removed from the DOM.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query(".red").replaceWith('<div class="green">Green</div>');
});

Results in this DOM structure:

<div class="container">
    <div class="green">Green</div>
    <div class="blue">Blue One</div>
    <div class="green">Green</div>
    <div class="blue">Blue Two</div>
</div>

siblings(query)

Defined by dojo/NodeList-traverse

Returns all sibling elements for nodes in this dojo/NodeList. Optionally takes a query to filter the sibling elements.

.end() can be used on the returned dojo/NodeList to get back to the original dojo/NodeList.

Parameter Type Description
query String
Optional

a CSS selector.

Returns: any | undefined

all sibling elements for nodes in this dojo/NodeList.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    Some Text
    <div class="blue first">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-traverse"
], function(query){
    query(".first").siblings();
});

returns the two divs with class "red" and the other div

with class "blue" that does not have "first".

Running this code:

query(".first").siblings(".red");

returns the two div with class "red".

slice(begin,end)

Defined by dojo/query

Returns a new NodeList, maintaining this one in place

This method behaves exactly like the Array.slice method with the caveat that it returns a dojo/NodeList and not a raw Array. For more details, see Mozilla's slice documentation

Parameter Type Description
begin Integer

Can be a positive or negative integer, with positive integers noting the offset to begin at, and negative integers denoting an offset from the end (i.e., to the left of the end)

end Integer
Optional

Optional parameter to describe what position relative to the NodeList's zero index to end the slice at. Like begin, can be positive or negative.

Returns: undefined

slideTo(args)

Defined by dojo/NodeList-fx

slide all elements of the node list to the specified place via dojo/fx.slideTo()

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

Move all tables with class "blah" to 300/300:
require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query("table.blah").slideTo({
        left: 40,
        top: 50
    }).play();
});

some(callback,thisObject)

Defined by dojo/query

Takes the same structure of arguments and returns as dojo/_base/array.some() with the caveat that the passed array is implicitly this NodeList. See dojo/_base/array.some() and Mozilla's Array.some documentation.

Parameter Type Description
callback Function

the callback

thisObject Object
Optional

the context

Returns: undefined

splice(index,howmany,item)

Defined by dojo/query

Returns a new NodeList, manipulating this NodeList based on the arguments passed, potentially splicing in new elements at an offset, optionally deleting elements

This method behaves exactly like the Array.splice method with the caveat that it returns a dojo/NodeList and not a raw Array. For more details, see Mozilla's splice documentation For backwards compatibility, calling .end() on the spliced NodeList does not return the original NodeList -- splice alters the NodeList in place.

Parameter Type Description
index Integer

begin can be a positive or negative integer, with positive integers noting the offset to begin at, and negative integers denoting an offset from the end (i.e., to the left of the end)

howmany Integer
Optional

Optional parameter to describe what position relative to the NodeList's zero index to end the slice at. Like begin, can be positive or negative.

item Object...
Optional

Any number of optional parameters may be passed in to be spliced into the NodeList

Returns: undefined

style(property,value)

Defined by dojo/NodeList-dom

gets or sets the CSS property for every element in the NodeList

Parameter Type Description
property String

the CSS property to get/set, in JavaScript notation ("lineHieght" instead of "line-height")

value String
Optional

optional. The value to set the property to

Returns: any

if no value is passed, the result is an array of strings. If a value is passed, the return is this NodeList

text(value)

Defined by dojo/NodeList-manipulate

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.

Parameter Type Description
value String

Returns: any | function | string

if no value is passed, the result is String, the text value of the first node. If a value is passed, the return is this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<div id="foo"></div>
<div id="bar"></div>

This code inserts "Hello World" into both divs:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("div").text("Hello World");
});

Example 2

assume a DOM created by this markup:

<div id="foo"><p>Hello Mars <span>today</span></p></div>
<div id="bar"><p>Hello World</p></div>

This code returns "Hello Mars today":

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    var message = query("div").text();
});

toggleClass(className,condition)

Defined by dojo/NodeList-dom

Adds a class to node if not present, or removes if present. Pass a boolean condition if you want to explicitly add or remove.

Parameter Type Description
className String

the CSS class to add

condition Boolean
Optional

If passed, true means to add the class, false means to remove.

toggleClassFx(cssClass,force,args)

Defined by dojox/fx/ext-dojo/NodeList-style

Animate the effect of adding or removing a class to all nodes in this list. see dojox.fx.toggleClass

Parameter Type Description
cssClass undefined
force undefined
args undefined

Returns: [object Value(type: function, value: undefined)]

Examples

Example 1

dojo.query(".box").toggleClass("bar").play();

toString()

Defined by dojo/query

Returns: undefined

val(value)

Defined by dojo/NodeList-manipulate

If a value is passed, allows seting the value property of form elements in this NodeList, or properly selecting/checking the right value for radio/checkbox/select elements. If no value is passed, the value of the first node in this NodeList is returned.

Parameter Type Description
value String | Array

Returns: any | function | undefined | null

if no value is passed, the result is String or an Array, for the value of the first node. If a value is passed, the return is this dojo/NodeList

Examples

Example 1

assume a DOM created by this markup:

<input type="text" value="foo">
<select multiple>
    <option value="red" selected>Red</option>
    <option value="blue">Blue</option>
    <option value="yellow" selected>Yellow</option>
</select>

This code gets and sets the values for the form fields above:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query('[type="text"]').val(); //gets value foo
    query('[type="text"]').val("bar"); //sets the input's value to "bar"
    query("select").val() //gets array value ["red", "yellow"]
    query("select").val(["blue", "yellow"]) //Sets the blue and yellow options to selected.
});

wipeIn(args)

Defined by dojo/NodeList-fx

wipe in all elements of this NodeList via dojo/fx.wipeIn()

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

Fade in all tables with class "blah":

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query("table.blah").wipeIn().play();
});

Example 2

Utilizing auto to get the NodeList back:

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query(".titles").wipeIn({ auto:true }).onclick(someFunction);
});

wipeOut(args)

Defined by dojo/NodeList-fx

wipe out all elements of this NodeList via dojo/fx.wipeOut()

Parameter Type Description
args Object
Optional

Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of an auto parameter.

Returns: dojo/_base/fx.Animation|dojo/NodeList | undefined

A special args member auto can be passed to automatically play the animation. If args.auto is present, the original dojo/NodeList will be returned for further chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed

Examples

Example 1

Wipe out all tables with class "blah":

require(["dojo/query", "dojo/NodeList-fx"
], function(query){
    query("table.blah").wipeOut().play();
});     

wrap(html)

Defined by dojo/NodeList-manipulate

Wrap each node in the NodeList with html passed to wrap.

html will be cloned if the NodeList has more than one element. Only DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
html String | DOMNode

Returns: any | function

the nodes in the current NodeList will be returned, not the nodes from html argument.

Examples

Example 1

assume a DOM created by this markup:

<b>one</b>
<b>two</b>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query("b").wrap("<div><span></span></div>");
});

Results in this DOM structure:

<div><span><b>one</b></span></div>
<div><span><b>two</b></span></div>

wrapAll(html)

Defined by dojo/NodeList-manipulate

Insert html where the first node in this NodeList lives, then place all nodes in this NodeList as the child of the html.

Parameter Type Description
html String | DOMNode

Returns: any | function

the nodes in the current NodeList will be returned, not the nodes from html argument.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query(".red").wrapAll('<div class="allRed"></div>');
});

Results in this DOM structure:

<div class="container">
    <div class="allRed">
        <div class="red">Red One</div>
        <div class="red">Red Two</div>
    </div>
    <div class="blue">Blue One</div>
    <div class="blue">Blue Two</div>
</div>

wrapInner(html)

Defined by dojo/NodeList-manipulate

For each node in the NodeList, wrap all its children with the passed in html.

html will be cloned if the NodeList has more than one element. Only DOM nodes are cloned, not any attached event handlers.

Parameter Type Description
html String | DOMNode

Returns: any | function

the nodes in the current NodeList will be returned, not the nodes from html argument.

Examples

Example 1

assume a DOM created by this markup:

<div class="container">
    <div class="red">Red One</div>
    <div class="blue">Blue One</div>
    <div class="red">Red Two</div>
    <div class="blue">Blue Two</div>
</div>

Running this code:

require(["dojo/query", "dojo/NodeList-manipulate"
], function(query){
    query(".red").wrapInner('<span class="special"></span>');
});

Results in this DOM structure:

<div class="container">
    <div class="red"><span class="special">Red One</span></div>
    <div class="blue">Blue One</div>
    <div class="red"><span class="special">Red Two</span></div>
    <div class="blue">Blue Two</div>
</div>

© 2005–2017 JS Foundation
Licensed under the AFL 2.1 and BSD 3-Clause licenses.
http://dojotoolkit.org/api/1.10/dojo/NodeList.html