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')
});
这似乎与 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
我尝试了以下方法:
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')
});