如何让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')可以选择三个

元素。如果我只想获取

1和

2，而不是

1的子

1.1，我该如何写一个像css选择器一样的[[current node]] > div.bar呢？

有没有人能够解释一下这个问题呢？

- Need4Steed

---

如果您记录或警报foo元素的innerHTML，您会发现浏览器呈现您的内容与字面源代码不同。 p元素被关闭并分开而不是包含内部p元素。 - kennebec

明白啦！p不应该嵌套在p里面。;) - Need4Steed

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

在这里，“查询”将被“rooted”到pdiv元素。

- megamurmulis

---

这太过前沿，目前还不实用（而且它是去年提出的！）。在启用配置标志后，Chrome或Firefox中可用:scope，但在IE中不可用。 - Rolf

Answer 2

实际上有一个伪类 :scope 可以选择当前元素，但是，任何版本的 MS Internet Explorer 都没有支持它。

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

- Pinke Helga

Answer 3

没有选择器可以指定调用 .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，那么您可以暂时为其分配一个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;

- Blue Skies

Answer 4

你可以像这样使用：

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

- Bhojendra Rauniyar

---

但是我需要做的是将元素E传递给一个函数，并让函数从E的子元素中选择某些内容，而不是后代。 - Need4Steed