javascript - 在 mdn web docs Element.querySelector 方法说它应该是后代但示例显示否则

Question

我正在从 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 的后代标记，此代码仍然有效。
你能指出我哪里出错了吗？

Answer 1

Element.querySelector()首先应用传递给 .querySelector() 的 CSS 选择器方法，整个文档和 不是基本元素 其中.querySelector()被调用。这样做是为了生成初始的潜在元素集。
在生成初始潜在元素集后，潜在元素列表将被过滤以仅保留那些作为基本元素后代的元素。最后，返回此过滤列表中的第一个元素。

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

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

The entire hierarchy of elements isconsidered when matching, including those outside the set of elementsincluding baseElement and its descendants; in other words, selectorsis first applied to the whole document, not the baseElement, togenerate an initial list of potential elements. The resulting elementsare then examined to see if they are descendants of baseElement. Thefirst match of those remaining elements is returned by thequerySelector() method.