如何使 querySelectorAll 仅从当前元素的子元素中选择

Question

我要问的是如何用 HTML5 的 querySelector/querySelectorAll 实现 jQuery 的 children() 的等效功能，即如何在选择器模式中指定当前元素。

例如：

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

document.getElementById('foo').querySelectAll('div.bar') 将选择所有三个 divs。如果我只想获取 div1 和 div2，而不是 div1 的子 div1.1，该怎么办？ [[current node]] > div.bar 像 css 选择器怎么写？

有人能解释一下吗？

Answer 1

在你的例子中你有did id="foo"，所以上面的例子有效。

但是在父元素没有 ID 的情况下，但您仍想使用 querySelectorAll 来获取直接子元素 - 也可以使用 :scope 引用元素，如下所示：

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

这里的查询将“植根”到 pdiv 元素..

Answer 2

没有用于指定调用 .querySelectorAll 的元素的选择器（尽管我认为可能已经提出了一些建议）。

所以你不能做这样的事情：

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

---

您需要从文档中进行选择，并在选择器中包含#foo ID。

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

---

但是如果你必须从一个元素开始，一种可能性是获取它的 ID（假设它有一个）并将它连接到选择器中。

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

---

如果该元素可能没有 ID，那么您可以暂时给它一个。

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;

Answer 3

其实有一个伪类:scope来选择当前元素，但是不指定为任何版本的MS都支持Internet Explorer.

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

Answer 4

你可以这样使用：

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