在 mdn web docs Element.querySelector 方法中说它应该是后代，但示例显示其他答案

【问题标题】：In mdn web docs Element.querySelector method says that it should be descendant but example shows otherwise在 mdn web docs Element.querySelector 方法中说它应该是后代，但示例显示其他
【发布时间】：2020-07-13 10:30:47
【问题描述】：

我正在从 MDN 网络文档中学习 JavaScript。我正在研究Element.querySelector()方法。

据说它返回第一个元素，该元素是调用它的元素的后代，它与指定的选择器组匹配。

但是有一个例子，它与这个事实相矛盾。

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  (baseElement.querySelector("div span").innerHTML);

<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

这里，div 标签不是 p 标签的后代，但这段代码仍然有效。

你能指出我哪里出错了吗？

【问题讨论】：

标签： javascript html queryselector

【解决方案1】：

Element.querySelector() 首先应用传递给.querySelector() 方法的CSS 选择器，在整个文档上 并且不是在其上调用.querySelector() 的基本元素。这样做是为了生成一组初始的潜在元素。

在生成潜在元素的初始集合后，然后过滤潜在元素列表以仅保留作为基本元素后代的那些元素。最后，返回此过滤列表中的第一个元素。

在您的代码示例中，首先在整个文档中搜索与div span 匹配的元素。由于整个文档中只有一个元素与div span 选择器匹配，因此初始潜在元素集仅包含一个span 元素。之后，检查这个span 元素，看它是否是baseElement 的后代。因为，在这种情况下，它是 baseElement，返回。

我上面解释的内容写在MDN - Element.querySelector()的“返回值”标题下

元素的整个层次结构是匹配时考虑，包括元素集之外的那些包括 baseElement 及其后代；换句话说，选择器首先应用于整个文档，而不是 baseElement，以生成潜在元素的初始列表。结果元素然后检查它们是否是 baseElement 的后代。这剩余元素的第一个匹配项由 querySelector() 方法。

【讨论】：