What does the dojo.query() return?

Question

I'm just getting started with dojo, and I've understood that dojo.query is the same as $ in jQuery.

But I haven't figured out what it returns. Is it a specialized object like in jQuery?

What I'm trying to do (with no luck) is:

dojo.query("output").innerHTML = data;
//this doesn't work either:
dojo.query("output").html(data);
//tried accessing by id as well
dojo.query("#output").html(data);
//and tried to access a div, incase dojo has some issues with html5 elements
dojo.query("#divOutput").html(data);

And I'm currently using the new html5 elements:

<output id="output">Output goes here</output>
<div id="divOutput">non-html5 output goes here</div>

And I can't seem to find a good list on what to do with objects returned by dojo.query()..

edit: Okay, I think dojo is just messing with me now. I found this method: addContent() and that works on the above selector. But I don't want to add content, I want to replace content...

Answer 1

The query method returns a NodeList object.

In the ref for NodeList you can find a list of functions that you can apply to the list of elements. There is no innerHTML function for the list, but the html function should work.

There is no "output" element in HTML, perhaps you try to target elements with the class name "output"?

dojo.query(".output").html(data)

Or the element with id "output"?

dojo.query("#output").html(data)

Answer 2

Also, there is a dojox.jq wrapper (in development, coming in 1.4) which emulates the JQuery return object APIs

Answer 3

As was said above, query method returns NodeList object, so you can iterate it's result as array, or use dojo methods that work with NodeList (e.g. attr):

dojo.query("#divOutput").attr("innerHTML", data);

But as soon as you are trying to query nodes by id, it would be better to use dojo.byId() method, which returns domNode:

dojo.byId("divOutput").innerHTML = data;

Or in more dojo style:

dojo.attr(dojo.byId("divOutput"), "innerHTML", data)

Answer 4

If you want to replace all the output tags' content with the same thing, then this code should always work:

// replace the contents of ALL <output> tags
dojo.query('output').forEach(function(node) { node.innerHTML = data; });

Dojo also provides a little shortcut for these kinds of things. You can specify a string to NodeList's forEach function like this:

// replace the contents of ALL <output> tags (as long as data is global)
dojo.query('output').forEach("item.innerHTML = data;");

The word item in the string is special. (This is a pain to debug, so it might not be worth it.)