dojo/NodeList (version 1.8)

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

appends content to the end if the position is omitted

dojo.query("h3 > p").addContent("hey there!");

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

dojo.query("[thinger]").addContent("...", "first");

adds a header before each element of the list

dojo.query(".note").addContent("<h4>NOTE:</h4>", "before");

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

dojo.query(".note").addContent(dojo.byId("foo"));

Append nodes from a templatized string.

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

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

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

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:

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

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:

dojo.query(".second").prevAll().andSelf();

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

Another way to fade out:

dojo.query(".thinger").anim({ opacity: 0 });

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

dojo.query(".thinger").anim({ width: 500 }, 700);

dojo.query(".zork").animateProperty({
    duration: 500,
    properties: {
        color:      { start: "black", end: "white" },
        left:       { end: 300 }
    }
}).play();

dojo.query(".grue").animateProperty({
    auto:true,
    properties: {
        height:240
    }
}).onclick(handler);

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:

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

assume a DOM created by this markup:

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

Running this code:

dojo.query("span").appendTo("p");

Results in this DOM structure:

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

Make all nodes with a particular class focusable:

dojo.query(".focusable").attr("tabIndex", -1);

Disable a group of buttons:

dojo.query("button.group").attr("disabled", true);

innerHTML can be assigned or retrieved as well:

// get the innerHTML (as an array) for each list item
var ih = dojo.query("li.replaceable").attr("innerHTML");

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:

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

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:

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

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:

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

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:

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

returns the div with class "container".

add an onclick handler to every button on the page

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

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

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

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

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

Get all the data items for a given node.

var list = dojo.query(".foo").data();
var first = list[0];

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

dojo.query(".foo").data({ bar:"baz", foo:"bar" });

Then get some random key:

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

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

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:

dojo.query(".interior").even();

returns the two divs with class "blue"

Fade in all tables with class "blah":

dojo.query("table.blah").fadeIn().play();

Fade out all elements with class "zork":

dojo.query(".zork").fadeOut().play();

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

var fo = dojo.query(".zork").fadeOut();
dojo.connect(fo, "onEnd", function(){ /*...*/ });
fo.play();

Using auto:

dojo.query("li").fadeOut({ auto:true }).filter(filterFn).forEach(doit);

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

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

the same filtering using a CSS selector

dojo.query("*").filter("p").styles("backgroundColor", "yellow");

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:

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

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

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:

dojo.query("div").innerHTML("<p>Hello World</p>");

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>:

var message = dojo.query("div").innerHTML();

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:

dojo.query("div").innerHTML("<p>Hello World</p>");

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>:

var message = dojo.query("div").innerHTML();

assume a DOM created by this markup:

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

Running this code:

dojo.query("span").insertAfter("p");

Results in this DOM structure:

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

assume a DOM created by this markup:

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

Running this code:

dojo.query("span").insertBefore("p");

Results in this DOM structure:

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

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:

dojo.query(".blue").last();

returns the last div with class "blue",

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:

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

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:

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

returns the two divs with class of "next".

Running this code:

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

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

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:

dojo.query(".interior").odd();

returns the two divs with class "red"

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:

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

returns the two divs with class "blue".

Running this code:

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

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

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:

dojo.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:

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

returns the one div with class "container".

assume a DOM created by this markup:

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

Running this code:

dojo.query("span").prependTo("p");

Results in this DOM structure:

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

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:

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

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

Running this code:

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

does not return any elements.

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:

dojo.query(".second").prevAll();

returns the two divs with class of "prev".

Running this code:

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

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

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:

var l = new NodeList(dojo.byId("foo"), dojo.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");

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

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:

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

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:

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

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:

dojo.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:

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

returns the two div with class "red".

Move all tables with class "blah" to 300/300:
dojo.query("table.blah").slideTo({
    left: 40,
    top: 50
}).play();

assume a DOM created by this markup:

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

This code inserts "Hello World" into both divs:

dojo.query("div").text("Hello World");

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

var message = dojo.query("div").text();

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

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:

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

Fade in all tables with class "blah":

dojo.query("table.blah").wipeIn().play();

Utilizing auto to get the NodeList back:

dojo.query(".titles").wipeIn({ auto:true }).onclick(someFunction);

Wipe out all tables with class "blah":

dojo.query("table.blah").wipeOut().play();

assume a DOM created by this markup:

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

Running this code:

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

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:

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

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:

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