使用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

但我收到一个错误,告诉我我使用的选择器无效.

---

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

Answer 1

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

我不确定浏览器支持,但我在chrome和chrome移动打包应用程序上使用它,它工作正常.

Answer 2

不，没有办法^（还）在不使用对该元素的引用的情况下引用某个元素的所有子元素。因为>是一个子组合器，它表示父元素和子元素之间的关系，所以需要一个简单的选择器（父）（在您的示例中缺少）。

在一个评论，BoltClock说，该选择器API级别2规范定义了一个方法^{名可以改变}“其作为什么可能会被称为相对选择器（可以与组合子而不是化合物选择启动一个选择器）的自变量” . 实现后，可以按如下方式使用：findAll

a_div.findAll('> div');