How to find child nodes that match a selector with JavaScript

Posted . Visible to the public.

Using querySelector or querySelectorAll in JavaScript, you can easily find descendants of a node that match a given selector.

But what if you want to find only children (i.e. direct descendants) of an element?
Easy: use :scope. It references the element on which DOM API methods are being called:

element.querySelectorAll(':scope > .your-selector')

Example

Consider this HTML

<body>
  <div id="container1">
    <div id="container1a">foo</div>
    <div id="container1b">bar</div>
    <div id="container1c">baz</div>
  </div>
  <div id="container2">
    Hello Universe
  </div>
</body>

without :scope

A simple document.body.querySelectorAll('div') will return a NodeList with 5 items, i.e. all 5 divs from above.

with :scope

Using document.body.querySelectorAll(':scope > div') you'll receive a NodeList with the 2 children of body:

  1. The container1 element
  2. The container2 element

Browser Support

:scope is supported in all browsers Show archive.org snapshot for the JavaScript DOM API.

Arne Hartherz
Last edit
Arne Hartherz
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2023-08-04 13:07)