Get direct children using querySelectorAll in JavaScript

avatar

Borislav Hadzhiev

Last updated: Dec 28, 2021

banner

Check out my new book

Get direct children using querySelectorAll #

Use the :scope pseudo-class to get the direct children of an element using querySelectorAll, e.g. parent.querySelectorAll(':scope > div'). When used with the querySelectorAll method, :scope matches the element on which the method was called.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="parent"> <div class="child"> Child 1 <div>Nested Child 1</div> </div> <div class="child"> Child 2 <div>Nested Child 2</div> </div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const parent = document.querySelector('#parent'); const children = parent.querySelectorAll(':scope > div'); console.log(children); // 👉️ [div.child, div.child]

We used the document.querySelector method to select the parent by its id.

If you don't need access to the parent element, you can turn this into a one step process.

index.js
const children = document.querySelectorAll('#parent > div'); console.log(children); // 👉️ [div.child, div.child]

This selector works in the same way as using :scope, but doesn't require us to call the querySelectorAll method scoped to a particular element.

When used with the querySelector or querySelectorAll methods, :scope matches the element on which the method was called (the parent).

The example shows how to get all div elements that are direct children of an element with an id set to parent.

You could also target direct children with a specific class.

index.js
const parent = document.querySelector('#parent'); const children = parent.querySelectorAll(':scope > .child'); console.log(children); // 👉️ [div.child, div.child]

The example selects all direct children of the parent element that have a class of child.

You can narrow this down even more by selecting div elements with the class of child.

index.js
const parent = document.querySelector('#parent'); const children = parent.querySelectorAll(':scope > div.child'); console.log(children); // 👉️ [div.child, div.child]

We selected all direct children of an element with an id of parent that are divs and have a class of child.

The results wouldn't include any span or p elements that have the class child.

Note that the querySelectorAll method returns a NodeList, not an array. This means that you can't use most of the methods the array data type implements.

If you want to convert the result to an array, use the Array.from method.

index.js
const parent = document.querySelector('#parent'); const children = Array.from(parent.querySelectorAll(':scope > div.child')); console.log(children); // 👉️ [div.child, div.child]

After the NodeList is converted to an array, you can use any of the array-supported methods in JavaScript.

Here is an example that uses the Array.forEach method to iterate over the array of DOM elements.

index.js
const parent = document.querySelector('#parent'); const children = Array.from(parent.querySelectorAll(':scope > div.child')); console.log(children); // 👉️ [div.child, div.child] children.forEach(element => { console.log(element); });
Use the search field on my Home Page to filter through my more than 3,000 articles.