javascript - 使用 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 遍历。目前我正在向根 div 添加一个临时 ID，但这似乎是一个丑陋的黑客......

score 11 · Accepted Answer

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

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

score 5 · Accepted Answer

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

在评论中，BoltClock 说Selectors API Level 2 规范定义了一个方法^名称^可能会^改变“它接受可能被称为相对选择器（可以以组合器而不是复合选择器开头的选择器）作为参数” . 实现时，可以按如下方式使用：findAll

a_div.findAll('> div');

score -1 · Accepted Answer

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

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

results 现在将保存您所有的子 div。

3 回答 3