Предположим, что у вас есть список с вложенными дочерними списками.
<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. Любые решения?
Правильный способ записи селектора, "привязанного" к текущему элементу, заключается в использовании :scope.
ul.querySelectorAll(":scope > li");
См. мой ответ здесь для объяснения и надежного кросс-браузерного решения: fooobar.com/questions/109492/...
Поскольку возвращаемый ul является NodeList, он не скрывает своего содержимого, как коллекция jQuery. Вам нужно будет использовать ul[0].querySelectorAll() или лучше выбрать ul с помощью querySelector().
Кроме того, querySelectorAll() не будет принимать > и работать из своего текущего контекста. Однако вы можете заставить его работать с помощью lazd answer (хотя проверьте совместимость браузера) или с любым из этих обходных решений (которые не должны иметь проблем с браузером)...
[].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';
});
Вам нужно выполнить итерацию по NodeList, возвращаемую document.querySelectorAll(), а затем вызвать element.querySelectorAll() для каждого элемента в этом списке.