querySelectorAll select children 但不是 grandchildren Vanilla Javascript

Question

这似乎与 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")

感谢您的帮助！

Answer 1

您可以过滤元素的子元素。 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')
});

querySelectorAll select children 但不是 grandchildren Vanilla Javascript

querySelectorAll select children but not grandchildren Vanilla Javascript

javascript

html

selectors-api