querySelectorAll select children 但不是 grandchildren Vanilla Javascript

querySelectorAll select children but not grandchildren Vanilla Javascript

这似乎与 Selecting <li> child node but not grandchildren with vanilla JavaScript and Selecting children elements but NOT grandchildren 重复,但还是有很大的不同。


我在js中有一个元素:

var element = document.getElementBySomething(...);

元素有很多children和classlayer,有的children,有的大children。

正在将此元素传递给函数以供进一步使用...

在此函数中,如何使用 querySelectorAll

仅获取元素的 children(不是 grandchildren)

我尝试了以下方法:

element.querySelectorAll(" > .layer")

但是,这不起作用,因为它不是有效的 css 选择器。

我知道可以这样做:querySelectorAll("#my_id > .layer"),但我已经将一个元素传递给函数,它可能没有 id,class 等,我可以轻松识别它。

我该怎么做?

类似于:document.querySelectorAll(element + " > .layer")

感谢您的帮助!

您可以过滤元素的子元素。 Working demo.

// matchSelector
var matches = (function(p){
  return p.matches 
         || p.webkitMatchesSelector
         || p.mozMatchesSelector
         || p.msMatchesSelector 
}(Element.prototype))

var layers = [].filter.call(element.children, function(el) { 
  return matches.call(el, '.layer')
});