javascript - 在 mdn web 文档中 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 is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.