Question

My code:

var parent = document.createElement('div');
var pen = document.createElement('div');
var dog = document.createElement('div');
dog.className = "dog";
pen.appendChild(dog);
parent.appendChild(pen);
dojo.query("> *", parent).forEach( function(node){
    if(node.className == "dog")alert('bark');
});
dojo.query("> .dog", parent).forEach( function(node){
    alert('bark');
});

I’m getting no alert “bark”s. What am I doing wrong?

Answer 1

You’re problem is that the generated html doesn’t match the selector:

<div title="parent">
    <div title="pen">
        <div class="dog">
        </div>
    </div>
</div>

Because > * will only match pen and > .dog won’t match. You could change these to:

var parent = document.createElement('div');
var pen = document.createElement('div');
var dog = document.createElement('div');
dog.className = "dog";
pen.appendChild(dog);
parent.appendChild(pen);
dojo.query("> * > *", parent).forEach(function (node) {
    if (node.className == "dog") {
        alert('bark');
    }
});
dojo.query("> * > .dog", parent).forEach(function (node) {
    alert('bark');
});

Here’s a fiddle: http://jsfiddle.net/pTqmL/

Edit

Or if it just needs to be inside of parent:

dojo.query("*", parent).forEach(function (node) {
    if (node.className == "dog") {
        alert('bark');
    }
});
dojo.query(".dog", parent).forEach(function (node) {
    alert('bark');
});

Based on your comment, I think the core thing you might be overlooking/unaware of is that query is scoped inside of parent.