javascript - How to make querySelectorAll select only from child elements of the current element - Stack Overflow

admin管理员组

文章数量:1341431

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?

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?

• javascript
• css
• selectors-api

Share Improve this question Follow edited Oct 28, 2013 at 6:01 Need4Steed asked Oct 28, 2013 at 5:18 Need4SteedNeed4Steed 2,18033 gold badges2222 silver badges3030 bronze badges 2

• 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. – kennebec Commented Oct 28, 2013 at 5:26
• Get it! p is not supposed to be nested in p.;) – Need4Steed Commented Oct 28, 2013 at 6:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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

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;

You can just use like this:

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

本文标签：