Question

这似乎与Selecting <li> child node but not grandchildren with vanilla JavaScript和Selecting children elements but NOT grandchildren重复，但它有点不同。

我在js中有一个元素：

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

该元素有很多类layer的孩子，其中一些是孩子，其中一些是孙子。

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

在这个函数中，你如何使用querySelectorAll

只获得元素的子元素（而不是孙子元素）

我尝试了以下内容：

element.querySelectorAll(" > .layer")

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

我知道可以执行类似：querySelectorAll("#my_id > .layer")之类的操作，但我已经将一个元素传递给一个函数，该函数可能没有id，类等，我可以很容易地识别它。 / p>

我将如何做到这一点？

类似于：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选择孩子而不是孙子香草Javascript

1 个答案: