CODEWITHSUNDEEP
javascriptcssselectors-api
Need4Steed
Need4Steed

Reputation: 2180

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

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?

Upvotes: 5

Views: 6353

Answers (4)

Pinke Helga
Pinke Helga

Reputation: 6682

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')

Upvotes: 3

megamurmulis
megamurmulis

Reputation: 340

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

Upvotes: 6

Blue Skies
Blue Skies

Reputation: 2975

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;

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can just use like this:

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

Upvotes: 0

Related Questions