Question

I’m using dojo.query, which internally uses CSS3 selectors to identify which elements you want to retrieve.

What I’m trying to find is all elements with tag “foo”, but only the outermost (ie. it’s permitted for one “foo” to be embedded inside another one, and I want to ignore those). The outer elements can appear at any level of the document, nested inside almost any other element.

Of course, dojo.query('foo') returns all foo elements, including the nested ones (which I don’t want).

My next attempt was dojo.query('foo:not(foo foo)'), but this returns no results (since descendent selectors aren’t “simple selectors” so aren’t supported by :not).

I know that the usual CSS-level solution for this sort of thing is to define two rules (foo and foo foo), so that nested elements can be treated differently. But that won’t work in this case (since this is just a single selection). (It also strikes me as untidy in real CSS as well, since the nested elements still get the first rule applied to them anyway, making it impossible to use the browser or parent default value for something the first rule overrode.)

If it helps, at least at the moment when one foo is inside another it must be a direct child, although they can end up nested to any arbitrary level. (ie. ‘foo>foo’ would also successfully match all nested foo elements, but unfortunately that’s still the opposite of what I want.)

Edit: the workaround I’m using at the moment is below, although I’m still hoping for something a bit more elegant (and more ancestor-safe, in case there can be indirect nesting):

dojo.query('foo').forEach(function(foo) {
    if (foo.parentNode.localName == 'foo') { return; }
    // ...
});

Answer 1

If it will always be direct descendants then you can do

dojo.query("foo").filter(function(item) {
    return (item.parentNode.nodeName.toLowerCase() !== "foo");
})