时间戳

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

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

问题描述

我正在从 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>

在这里，divtag 不是 tag 的后代p，但这段代码仍然有效。

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

标签： javascripthtmlqueryselector

解决方案

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

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

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

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

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

推荐阅读