HomePostsTagsBitsProjects

Bit #27

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>

With the HTML above, you can do:

console.log(document.body.querySelectorAll("*"));
// NodeList(5) [ul, li, li, li, p]


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