在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");

但它不在原生querySelectorAll 。 有解决方案吗

Answer 1

编写“root”到当前元素的选择器的正确方法是使用:scope 。

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

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

Answer 2

因为返回的ul是NodeList，所以它不会像jQuery集合那样隐式循环其内容。 你需要使用ul[0].querySelectorAll()或者更好的是仍然用querySelector()选择ul 。

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

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

jsFiddle 。

这将选择作为ul后代的所有li元素，然后删除不是直接后代的元素。

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

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

jsFiddle 。

Answer 3

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