选择元素的子[ren]，因为选择后代[s]

Question

说我有var hoop = otherLibrary.getHoop() ：

.stripey

我可以选择var stripedOnes = hoop.querySelectorAll('.stripey') ：

的下降[s]

#hoop .stripey {

这就像CSS规则：

jQuery

但是，我如何为子[ren]，使用var stripedChildren = hoop.querySelectorAll('> .stripey') 做同样的事情？

jQuery

不起作用，但在Sizzle / #hoop > .stripey { 中确实有效。这个CSS规则的JS等价物是什么？

{{1}}

Answer 1

嗯，最直接的方法是在querySelectorAll()

中使用完整选择器

document.querySelectorAll("#hoop > .stripey");

但是，如果回答您的具体问题......

我相信基于选择器选择元素子元素的最好的方法是：

1. 将.children集合转换为数组
2. 使用.matches()
过滤每个针对选择器测试它的元素

所以：

var hoop = document.getElementById("hoop");
var stripedChildren = [].slice.call(hoop.children).filter(function(element) {
    return element.matches(".stripey");
});

Answer 2

您可以使用以下内容 -

document.querySelectorAll("#hoop > .stripey");