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

问题描述

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

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

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

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

<h5>原始内容</h5><p>段落内<span>内跨度</span>段落内</p>
<div><h5>输出</h5><div id="输出"></div>

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

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

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

在生成初始潜在元素集后，潜在元素列表将被过滤以仅保留那些是基本元素的后代元素.最后，返回过滤列表中的第一个元素.

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

我上面解释的内容写在返回值"下；MDN - Element.querySelector()

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

I am learning JavaScript from the MDN web docs. I was studying Element.querySelector() method.

It is written that it returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

But there is an example given, which contradicts this fact.

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>

Here, div tag is not a descendant of p tag, still this code works.

Can you point where I am going wrong ?

Element.querySelector() first applies the CSS Selectors passed to .querySelector() method, on the whole document and not the base element on which .querySelector() was invoked. This is done to generate initial set of potential elements.

After generating initial set of potential elements, list of potential elements is then filtered to retain only those elements which are descendants of the base element. Finally, the first element from this filtered list is returned.

In your code example, entire document is first searched for elements that match div span. As there is only one element in the entire document that matches div span selector, initial set of potential elements contains only one span element. After that, this span element is checked to see if it is the descendant of baseElement. Since, in this case, it is a descendant of the baseElement, it is returned.

What i explained above is written under "Return Value" heading in 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.