在 mdn 网络文档 Element.querySelector 方法中说它应该是后代，但示例显示不是这样

Question

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

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

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

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()

的“Return 值”标题下

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.

在 mdn 网络文档 Element.querySelector 方法中说它应该是后代，但示例显示不是这样

In mdn web docs Element.querySelector method says that it should be descendant but example shows otherwise

html

javascript

queryselector