Get Child Element by Class using JavaScript

avatar

Borislav Hadzhiev

Mon Dec 27 20212 min read

banner

Photo by Noah Silliman

Get Child Element by Class using JavaScript #

To get a child element by class:

  1. Use the document.querySelector() method to get the parent element.
  2. Call the querySelector method on the parent element passing it the class name as a parameter.
  3. For example, parent.querySelector('.first') gets the child with class first.

Here is the HTML for the examples in the article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="parent"> <div class="first">Child 1</div> <div class="second">Child 2</div> </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 child1 = parent.querySelector('.first'); console.log(child1); // div.first const children = parent.querySelectorAll('.first'); console.log(children); // ๐Ÿ‘‰๏ธ [div.first]

We used the document.querySelector method to get 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 querySelector method on the parent element.

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

The Element.querySelector method returns the first child element that matches the provided selector.

If you need a collection of the children that have the specific class, use the Element.querySelectorAll method instead.

Note that with the approach of passing the class name to the querySelector andquerySelectorAll method we are selecting any of the children of the element.

This includes nested children that have the supplied class.

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 class="first"> Child 1 <!-- ๐Ÿ‘‡๏ธ Nested element with same class --> <div class="first">Nested Child 1</div> </div> <div class="second"> Child 2 </div> </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 child1 = parent.querySelector(':scope > .first'); console.log(child1); // div.first const children = parent.querySelectorAll(':scope > .first'); console.log(children); // ๐Ÿ‘‰๏ธ [div.first]

We used the :scope pseudo-class to select the direct children of the DOM element that have a class of first.

Even though there is a nested DOM element that has the same class, it wasn't selected.

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

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