选择元素的child[ren]，就像选择descendant[s]一样

Question

假设我有一个HTMLElement

var hoop = otherLibrary.getHoop()

我可以选择它的下降点，即.stripey

var stripedOnes = hoop.querySelectorAll('.stripey')

这类似于CSS规则：

#hoop .stripey {

但是，我如何在不使用jQuery的情况下为孩子做同样的事情？

var stripedChildren = hoop.querySelectorAll('> .stripey')

不起作用，尽管在jQuery/Sizzle中是这样的。JS与这个CSS规则的等价性是什么？

#hoop > .stripey {

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