querySelectorAll 不适用于嵌套的 UL

Question

我发现在嵌套的 UL 对象上调用 querySelectorAll 时有些奇怪。有人可以确认这是一个错误，还是我想错了？

鉴于此 html：

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

我发现将选择器 'ul.second li' 与 querySelectorAll returns li.third 一起使用，即使这样调用也是如此：

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

我疯了吗？我已经尝试了很多其他案例，它们都可以正常工作，但这个不行。

这是我正在尝试做的 fiddle。

Answer 1

我认为你的困惑是，在 <ul class="second"> 上调用 querySelectorAll('ul.second li') 是 return 在你期望它为空时 <li class="third"></li>。

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

因此对于您的示例，它会找到 "second" 的任何后代 "is an LI element with ul.second as an ancestor"。

它不会像

那样按顺序查找查询中的每个元素

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

或"find all ul.second under elem and then find each li under those"

您可以使用类似

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

document.body.querySelectorAll('body div')

这将 return 一个页面中的所有 div，尽管查询是在 body

上发出的

querySelectorAll not working with nested ULs