You can use the :scope pseudo class to select direct children of an element with `.querySelectorAll()`.

posted on 23.08.2022

<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]