使用 querySelector 查找后代元素返回意外结果

Question

所以我最近一直在使用 querySelector，并且在尝试选择后代元素时发现了一些非常奇怪的行为。

以下面的标记为例：

<div id="parent">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

如果我想从 #parent 元素的上下文中查询这个 DOM 树，我可以这样做：

var parent = document.getElementById('parent');
parent.querySelector('div')

这会按预期返回#foo 元素。现在，如果我想通过仅引用标签名称来获取 #bar 元素，我可以执行以下任一操作：

var parent = document.getElementById('parent');
parent.querySelector('div div')
parent.querySelector('div > div')

相反，两个选择器字符串都返回#foo 元素，而不是#bar 元素？但是，将上下文元素 (#parent) 更改为跨度可以解决问题吗？似乎上下文元素会影响它解释选择器字符串的方式。或者，jQuery 的选择器引擎按预期执行。

我创建了一个CodePen 来说明问题。

我不认为这是一个错误，因为结果在多个浏览器中是一致的（我使用的是 Chrome 37）。我想我的问题是；我错过了什么吗？这是规范的一部分吗？有人对此行为有解释吗？

任何见解将不胜感激，谢谢， 瑞恩

Answer 1

根据the docs，“选择器是在元素所在的整个 DOM 树的上下文中针对给定元素评估的。”

也就是说，它不是 jQuery 风格的“从这里开始寻找匹配选择器路径的元素”。

#parent #foo 绝对匹配 div div 和 div > div，当从 DOM 树级别查看时，根据规范。

当您将 #parent 更改为 span 时，它“有效”，因为 #parent #foo 不再匹配 div div，而 #foo #bar 是新的第一个匹配项。