Селектор детей с использованием `querySelectorAll` в коллекции DOM

Предположим, что у вас есть список с вложенными дочерними списками.

<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. Любые решения?

Ответ 1

Правильный способ записи селектора, "привязанного" к текущему элементу, заключается в использовании :scope.

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

См. мой ответ здесь для объяснения и надежного кросс-браузерного решения: fooobar.com/questions/109492/...

Ответ 2

Поскольку возвращаемый ul является NodeList, он не скрывает своего содержимого, как коллекция jQuery. Вам нужно будет использовать ul[0].querySelectorAll() или лучше выбрать ul с помощью querySelector().

Кроме того, querySelectorAll() не будет принимать > и работать из своего текущего контекста. Однако вы можете заставить его работать с помощью lazd answer (хотя проверьте совместимость браузера) или с любым из этих обходных решений (которые не должны иметь проблем с браузером)...

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

jsFiddle.

Это выберет все элементы li, которые являются потомками вашего ul, а затем удалите те, которые не являются прямыми потомками.

В качестве альтернативы вы можете получить все childNodes, а затем отфильтровать их...

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

jsFiddle.

Ответ 3

Вам нужно выполнить итерацию по NodeList, возвращаемую document.querySelectorAll(), а затем вызвать element.querySelectorAll() для каждого элемента в этом списке.