Get Child Elements by Tag name using JavaScript

avatar

Borislav Hadzhiev

Mon Dec 27 20212 min read

banner

Photo by Jakub Kriz

Get Child Elements by Tag name using JavaScript #

Use the querySelectorAll method to get all child elements by tag name. For example, document.querySelectorAll('#parent div') selects all of the div elements that are descendants of an element with an id of parent.

Here is the HTML for the examples in this article.

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

And here is the related JavaScript code.

index.js
const children = document.querySelectorAll('#parent div'); console.log(children); // ๐Ÿ‘‰๏ธ [div, div]

We used the document.querySelectorAll method to select all div elements that are children of an element with an id of parent.

You could also achieve the same result in two simple steps.

index.js
const parent = document.querySelector('#parent'); console.log(parent); // ๐Ÿ‘‰๏ธ div#parent const children = parent.querySelectorAll('div'); console.log(children); // ๐Ÿ‘‰๏ธ [div, div]

We first selected the parent element by its id.

In this scenario, you could have used the document.getElementById method to achieve the same result, e.g.:

index.js
const parent = document.getElementById('parent');

The next step is to call the querySelectorAll method on the parent element.

When the querySelectorAll method is scoped to a specific element, it only selects the children of the element the method was called on.

The querySelectorAll method returns a NodeList containing the elements that match the provided selector.

Note that with the approach of passing the tag name to the querySelectorAll method, we are selecting any of the children of the element.

This includes nested children that are div elements.

If you only want to target direct children of the DOM element, use the :scope pseudo-class selector.

Here is the HTML for the example.

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

And here is the related JavaScript code.

index.js
const parent = document.querySelector('#parent'); console.log(parent); // ๐Ÿ‘‰๏ธ div#parent const children = parent.querySelectorAll(':scope > div'); console.log(children); // ๐Ÿ‘‰๏ธ [div, div]

We used the :scope pseudo-class to select the direct children of the parent that are div elements.

Even though there is a nested element that is also a div, it wasn't selected.

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

You could also achieve this in a single step:

index.js
const children = document.querySelectorAll('#parent > div'); console.log(children); // ๐Ÿ‘‰๏ธ [div, div]

If you don't need access to the parent element, you can use a single call of the querySelectorAll method to get the direct children of the element by a specific tag name.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee