Get Child Element by ID, Class or Tag in JavaScript

# Table of Contents

# Get Child Element by Class using JavaScript

To get a child element by class:

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

Here is the HTML for the examples in the article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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

Copied!
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]

get child element by class

If you need to get a Child element by Tag or ID, click on the corresponding subheading:

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

In this scenario, we could have used the document.getElementById method to achieve the same result.

index.js

Copied!
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.

index.js

Copied!
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const children = parent.querySelectorAll('.first');
console.log(children); // 👉️ [div.first]

Note that with the approach of passing the class name to the querySelector and querySelectorAll methods, we are selecting all of the children of the element.

This includes nested children that have the supplied class.

# Only get the Direct children of a DOM element

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

Copied!
<!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

Copied!
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

// ✅ get the first direct child with specific class
const child1 = parent.querySelector(':scope > .first');
console.log(child1); // div.first

// ✅ get all direct children with specific class
const children = parent.querySelectorAll(':scope > .first');
console.log(children); // 👉️ [div.first]

only get direct children of dom element

We used the :scope pseudo-class to select the direct children of the DOM element that has 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).

You can use the querySelectorAll method to get all direct child elements with the specified class or the querySelector method to get only the first child element with the given class.

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

index.js

Copied!
const children = document.querySelectorAll('#parent > .first');
console.log(children); // 👉️ [div.first]

const child = document.querySelector('#parent > .first');
console.log(child); // 👉️ div#first

This selector works in the same way as using :scope, but doesn't require us to call the document.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.

# Get Child Element by ID using JavaScript

To get a child element by id:

Use the document.querySelector() method to get the parent element.
Call the querySelector method on the parent element passing it the id as a parameter.
For example, parent.querySelector('#first') gets the child with id first.

Here is the HTML for the examples in the article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="parent">
      <div id="first">Child 1</div>
      <div>Child 2</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const child = parent.querySelector('#first');
console.log(child); // div#first

get child element by id

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

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

index.js

Copied!
const parent = document.getElementById('parent');

Notice that when using the querySelector method we prefix the id with a hash # and when using getElementById - we don't.

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 element that matches the provided selector.

In the example, we select a child element that has an id value set to first.

index.js

Copied!
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const child = parent.querySelector('#first');
console.log(child); // div#first

When passing the id to the querySelector method, we are selecting any of the children of the element.

This includes nested children that have the supplied id.

However, it shouldn't matter because the IDs on your page should be unique.

Having multiple elements with the same id on a single page can lead to confusing behavior and difficult-to-track bugs.

# 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.

index.js

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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

Copied!
const children = document.querySelectorAll('#parent div');
console.log(children); // 👉️ [div, div]

If you need to access elements of multiple types, separate them by a comma.

index.js

Copied!
const children = document.querySelectorAll('#parent div, span');
console.log(children); // 👉️ [div, div, span]

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

Copied!
const parent = document.querySelector('#parent');
console.log(parent); // 👉️ div#parent

const children = parent.querySelectorAll('div');
console.log(children); // 👉️ [div, div]

The call to the document.querySelector() method 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

Copied!
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.

With the approach of passing the tag name to the querySelectorAll method, we select any of the children of the element.

This includes nested children that are div elements.

# Target direct children of the element

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

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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

Copied!
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

Copied!
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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get Child Element by ID, Class or Tag in JavaScript

# Table of Contents

# Get Child Element by Class using JavaScript

# Only get the Direct children of a DOM element

# Get Child Element by ID using JavaScript

# Get Child Elements by Tag name using JavaScript

# Target direct children of the element

# Additional Resources

Borislav Hadzhiev