querySelectorAll select children but not grandchildren Vanilla Javascript

Question

This may seem like a duplicate to Selecting <li> child node but not grandchildren with vanilla JavaScript and Selecting children elements but NOT grandchildren, but it is a good bit different.

I have an element in js:

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

The element has a lot of children with class layer, some of them children, and some of them grandchildren.

This element is being passed into a function for further use...

In this function, how would you get only the children (not grandchildren) of the element using querySelectorAll

I tried the following:

element.querySelectorAll(" > .layer")

However, this does not work, as it is not a valid css selector.

I know it is possible to do something like: querySelectorAll("#my_id > .layer"), but I already have an element passed into a function, which may not have an id, class, etc. that I can easily identify it with.

How would I go about doing this?

Something like: document.querySelectorAll(element + " > .layer")

Thanks for the help!

[experimental stuff](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) — potashin, Jul 07 '16 at 14:54
@potashin That's really handy, but is only supported by Firefox at the moment. If this ever changed, I will use it in the future. For now though, I'll have to go with the other answer. — David Callanan, Jul 07 '16 at 20:13

Yury Tarabanko · Accepted Answer · 2016-07-07T15:10:25.753

3

You can filter element's children. 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')
});

edited Jul 07 '16 at 15:10

answered Jul 07 '16 at 14:57

Yury Tarabanko

44,270
9
84
98

I am getting an empty array when I `console.log(layers)` – David Callanan Jul 07 '16 at 15:05
Do I have to create another array, and instead of `return matches.call(el, '.layer')`, do `if(matches.call(el, '.layer')){ otherarray.push(el)}` – David Callanan Jul 07 '16 at 15:07
Works for me https://jsfiddle.net/tarabyte/fzm0hd3y/ – Yury Tarabanko Jul 07 '16 at 15:08
`Array.prototype.filter` creates new array. You don't need to create one manually. – Yury Tarabanko Jul 07 '16 at 15:09
1

By the way you forgot a bracket at the end of... oh wait you just edited it. I was about to say that could be the problem. – David Callanan Jul 07 '16 at 15:10
Weird, still not working. – David Callanan Jul 07 '16 at 15:16
Any errors in console? Or even better could you create a fiddle demonstrating the issue? – Yury Tarabanko Jul 07 '16 at 15:17
It's fine! I got it working. Thanks a million! – David Callanan Jul 07 '16 at 15:19

querySelectorAll select children but not grandchildren Vanilla Javascript

1 Answers1