Sometimes, we want to use querySelectorAll to retrieve direct children with JavaScript.

In this article, we’ll look at how to use querySelectorAll to retrieve direct children with JavaScript.

How to use querySelectorAll to retrieve direct children with JavaScript?

To use querySelectorAll to retrieve direct children with JavaScript, we can use the :scope > pseudoselector.

For instance, we write

const myDiv = document.getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

to get the myDiv element with getElementById.

Then we call querySelectorAll with the ":scope > .foo" select to get the direct children of the myDiv element with the foo class.

Conclusion

To use querySelectorAll to retrieve direct children with JavaScript, we can use the :scope > pseudoselector.