Skip to content

TIL that you can use the :scope pseudo class to select direct children of an element with .querySelectorAll().

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

<p>D</p>
  console.log(document.body.querySelectorAll('*'))
// NodeList(5) [ul, li, li, li, p]

console.log(document.body.querySelectorAll(':scope > *'))
// NodeList(2) [ul, p]

https://codepen.io/pen/?editors=1001