Skip to main content Accessibility Feedback

Getting direct descendants by selector with vanilla JavaScript

Last week, we looked at how to climb down the DOM with vanilla JavaScript.

I mentioned that you can use the .childNodes property to get direct descendant elements.

David Hund pointed out on Twitter that you can also get direct descendants that match a specific selector (or set of selectors) by using the > selector in querySelector() or querySelectorAll().

var directDescendants = document.querySelectorAll('#some-element > .pick-me');

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips