Child selector using `querySelectorAll` on a DOM collection

Question

Let's presume you got a list with nested child lists.

<ul>     <li></li>     <li>         <ul>             <li></li>             <li></li>         </ul>     </li>     <li></li> </ul> 

And use document.querySelectorAll() to make a selection:

var ul = document.querySelectorAll("ul"); 

How can i use the ul collection to get the direct child elements?

ul.querySelectorAll("> li");  // Gives 'Error: An invalid or illegal string was specified' 

Let's presume ul is cached somehow (otherwise i could have done ul > li directly).

In jQuery this works:

$("ul").find("> li"); 

But it doesn't in native querySelectorAll. Any solutions?

Answer 1

The correct way to write a selector that is "rooted" to the current element is to use :scope.

ul.querySelectorAll(":scope > li"); 

See my answer here for an explanation and a robust, cross-browser solution: https://stackoverflow.com/a/21126966/1170723