我正在从 MDN 网络文档学习 JavaScript。我刚刚在学习Element.querySelector() method.
据记载，它返回第一个元素，该元素是调用它的元素的后代，并且与指定的选择器组匹配。
但有一个例子与这个事实相矛盾。
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标签不是以下的后代p标签，这段代码仍然有效。
你能指出我哪里出错了吗？
Element.querySelector()首先应用传递给的 CSS 选择器.querySelector()方法，整个文档 and 不是基本元素其上.querySelector()被调用。这样做是为了生成初始的潜在元素集。
在生成初始的潜在元素集之后，过滤潜在元素列表以仅保留作为基本元素的后代的那些元素。最后，返回此过滤列表中的第一个元素。
在您的代码示例中，首先在整个文档中搜索匹配的元素div span。由于整个文档中只有一个元素匹配div span选择器，初始一组潜在元素仅包含一个span元素。之后，这个span检查元素以查看它是否是baseElement。因为在这种情况下，它是
这baseElement，它被返回。
我上面解释的内容写在“返回值”标题下MDN - Element.querySelector() https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
元素的整个层次结构是
匹配时考虑，包括元素集之外的那些
包括基本元素及其后代；换句话说，选择器
首先应用于整个文档，而不是baseElement，以
生成潜在元素的初始列表。结果元素
然后检查它们是否是 baseElement 的后代。这
剩余元素的第一个匹配项由
querySelector() 方法。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
