使用querySelectorAll时，有没有办法引用上下文节点的直接子节点而不使用ID？

Question

假设我有一个类似

的HTML结构

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

要使用querySelectorAll查询“a”的子项，我可以执行类似

的操作

//Get "b", but not "c"
document.querySelectorAll('#a > div')

我的问题是：是否可以在没有ID的情况下执行此操作，直接引用节点？我试着做了

var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here

但是我收到一个错误，告诉我我使用的选择器无效。

---

如果有人想知道，我的真实用例会更复杂，比如'＆gt; .foo .bar .baz'所以我宁愿避免手工DOM遍历。目前我正在为root div添加一个临时id，但这似乎是一个丑陋的黑客......

Answer 1

document.querySelector('#a').querySelectorAll(':scope > div')

我不确定浏览器支持，但我在chrome和chrome移动打包应用上使用它，它运行正常。

Answer 2

不，没有办法^（尚）引用某个元素的所有子元素而不使用对该元素的引用。由于>是child combinator，表示父元素和子元素之间的关系，因此需要simple selector（父级）（在您的示例中缺少）。

在评论中，BoltClock said Selectors API Level 2 specification定义方法findAll ^{名称​​可能更改} “作为一个参数，可能被称为相对选择器（一个可以用组合器而不是复合选择器开始的选择器）“。
实现时，可以按如下方式使用：

a_div.findAll('> div');

Answer 3

我想我一定是在误解你的问题，但这就是我解释它的方式..

          

var a = document.getElementById('a')
var results = a.querySelectorAll('div');

结果将立即保存所有的孩子div。