javascript - 在 DOM 集合上使用 `querySelectorAll` 的子选择器

Question

假设您有一个包含嵌套子列表的列表。

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

并用于document.querySelectorAll()进行选择：

var ul = document.querySelectorAll("ul");

我如何使用ul集合来获取直接子元素？

ul.querySelectorAll("> li"); 
// Gives 'Error: An invalid or illegal string was specified'

让我们假设ul以某种方式缓存（否则我可以ul > li直接完成）。

在 jQuery 中这有效：

$("ul").find("> li");

但它不是 native querySelectorAll。有什么解决办法吗？

score 41 · Accepted Answer

将选择器“植根”到当前元素的正确方法是使用:scope.

ul.querySelectorAll(":scope > li");

请在此处查看我的答案以获得解释和强大的跨浏览器解决方案：https ://stackoverflow.com/a/21126966/1170723

score 13 · Accepted Answer

因为ul返回的是一个 NodeList，它不会像 jQuery 集合那样隐式循环其内容。您需要使用ul[0].querySelectorAll()或更好地选择ulwith querySelector()。

除此之外，querySelectorAll()不会>从其当前上下文中获取和工作。但是，您可以使用lazd 的答案（尽管检查浏览器兼容性）或任何这些解决方法（应该没有浏览器问题）让它工作......

[].filter.call(ul.querySelectorAll("li"), function(element){
     return element.parentNode == ul;
});

这将选择所有li属于你的后代的元素，ul然后删除那些不是直接后代的元素。

或者，您可以获取所有内容childNodes，然后过滤它们...

[].filter.call(ul.childNodes, function(node) {
    return node.nodeType == 1 && node.tagName.toLowerCase() == 'li';
});

score 1 · Accepted Answer

您需要遍历NodeList返回的 by document.querySelectorAll()，然后调用element.querySelectorAll()该列表中的每个元素。

3 回答 3