dojo/NodeList (version 1.10)

Example 1

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

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"
    });
});

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>

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

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);
});

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);
});

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>

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>

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");
});

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>

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

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>

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

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");

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`]
});

Example 1

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

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"

Example 1

Fade in all tables with class "blah":

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

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);
});

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");
});

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

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();
});

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();
});

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>

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>

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

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.

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

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"

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

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

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>

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.

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

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");
});

Example 1

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

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>

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>

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

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();
});

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();
});

Example 1

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

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.
});

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);
});

Example 1

Wipe out all tables with class "blah":

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

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>

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>

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>