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