querySelectorAll不使用嵌套的UL

Question

我在嵌套的UL对象上调用querySelectorAll时看到了一些奇怪的东西。有人可以确认这是一个错误，还是我认为它错了？

鉴于此html：

<ul class="first">
<li>
    <ul class="second">
        <li class="third"></li>
    </ul>
</li>

我发现使用带有querySelectorAll的选择器'ul.second li'即使被调用也会返回li.third：

var ulSecond = document.querySelectorAll('ul')[1];
ulSecond.querySelectorAll('ul.second li'). // result is li.third

我疯了吗？我已经尝试过其他一些案例并且它们都能正常工作，但事实并非如此。

这是我想要做的事情的小提琴。

https://jsfiddle.net/gh9j04v5/

Answer 1

我认为您的疑惑是，querySelectorAll('ul.second li')上的<ul class="second">会在您预期为空时将<li class="third"></li>返回给您。

当您执行querySelectorAll时，它会搜索元素的后代以查找与查询匹配的元素，作为整个查询。

因此，对于您的示例，它会找到＆＃34; second＆＃34;的任何后代。 ＆＃34;是一个LI元素，ul.second作为祖先＆＃34;。

它不会按顺序查找查询中的每个元素，如

elem.querySelectorAll('ul.second')...forEach(querySelectorAll('li'))

或＆＃34;在elem下找到所有ul.second，然后在那些＆＃34;下找到每个li;

您可以使用类似

的查询在任何页面上看到此行为

document.body.querySelectorAll('body div')

，即使在div上发布了查询，也会返回页面中的所有body