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');

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

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