How to make querySelectorAll select only from child elements of the current element

Question

What I'm asking is how to implement the equivalent functionality of jQuery's children() with HTML5's querySelector/querySelectorAll, i.e. how do I designate the current element in the selector pattern.

For example:

  <div id="foo">
    <div class="bar" id="div1">
      <div class="bar" id="div1.1">
      </div>
    </div>
    <div class="bar" id="div2"></div>
  </div>

With document.getElementById('foo').querySelectAll('div.bar') all three divs will be selected. What if I only wanna get div1 and div2, not div1's child div1.1? How do I write [[current node]] > div.bar like css selector?

Could anybody shed some light on this?

Plosion

If you log or alert the innerHTML of the foo element, you will see that the browser is rendering your content differently than the literal source code. The p elements are closed and separated instead of containing inner- p elements. – Adorable

Get it! p is not supposed to be nested in p.;) – Plosion

Answer 1

In your example you have did id="foo", so above example works.

But in a situation when parent element has no ID, but you still want to use querySelectorAll to get immediate children - it is also possible to use :scope to reference element like this:

    var div1 = document.getElementById('div1'); //get child
    var pdiv = div1.parentNode; //get parent wrapper
    var list = pdiv.querySelectorAll(':scope > div.bar');

Here query will be "rooted" to pdiv element..

Bozen

That's way too bleeding edge to be useful, at the moment (and it was proposed last year!). :scope is available in Chrome or Firefox after enabling a configuration flag, and not available in IE. – Nalley

Answer 2

Actually there is a pseudo-class :scope to select the current element, however, it is not designated as being supported by any version of MS Internet Explorer.

document.getElementById('foo').querySelectAll(':scope>div.bar')

Mastermind

Answer 3

There's no selector for designating the element from which the .querySelectorAll was called (though I think something may have been proposed).

So you can't do anything like this:

var result = document.getElementById('foo').querySelectorAll('[[context]] > p.bar');

---

What you'd need would be to select from the document, and include the #foo ID in the selector.

var result = document.querySelectorAll("#foo > p.bar");

---

But if you must start with an element, one possibility would be to take its ID (assuming it has one) and concatenate it into the selector.

var result = document.querySelectorAll("#" + elem.id + " > p.bar");

---

If it's possible that the element doesn't have an ID, then you could temporarily give it one.

var origId = elem.id

if (!origId) {
    do {
        var id = "_" + Math.random().toString(16)
    } while (document.getElementById(id));

    elem.id = id;
}

var result = document.querySelectorAll("#" + elem.id + " > p.bar");

elem.id = origId;

Ctn

Answer 4

You can just use like this:

document.querySelectorAll('#foo > p.bar')

Irrational

But what I need to do is to pass element E to a function, and let the function select something from E's children, not descendants – Plosion