How To Get Child Elements By Class In JavaScript

Get Child Element by Class using JavaScript

Getting child elements by Class using JavaScript is not difficult, but it can not be easy with beginners if you don’t have the instruction. We will accompany you to solve this problem. There are some solutions to get child elements by Class in JavaScript. Let’s learn about it with the explanation and examples below.

Get Child Elements By Class in JavaScript

Solution 1: Using querySelector() method

The first solution to get child elements by class in JavaScript is using querySelector() method.

Syntax 

document.querySelector(CSS selectors)

Parameters

CSS selectorsid, classes, types, attributes, values of attributes, etc.

Return Value: An object.

Look at the example below to know more about this solution.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>How To Get Child Elements By Class Using JavaScript</title>
  <h1>Get Child Elements By Class Using JavaScript</h1>
  <h2>Solution 1: Using querySelector() method</h2>
</head>
<body>
  <ul id="parent-class">
    <li class="child1">Learn To Share IT</li>
    <li class="child2">I am crvt4722</li>
	<li class="child3">Get Child Elements</li>
    <li class="child4">Tutorial made by LearnShareIT.</li>
  </ul>
</body>
<script>
var parent = document.querySelector('#parent-class');

//get the first child element of the Class.
var firstChild = parent.querySelector('.child1');

//get the second child element of the Class.
var secondChild = parent.querySelector('.child2');

//get the last child element of the Class.
var lastChild = parent.querySelector('.child4');

document.writeln("The first element: "+ firstChild.innerHTML +"." 
                  +" The second element: "+secondChild.innerHTML+"."+
                  " The last element: "+lastChild.innerHTML);
</script>
</html>

Output

Solution 2: Using querySelectorAll() method

Another solution for you is using querySelectorAll() method.

Syntax 

document.querySelectorAll(CSS selectors)

Parameters

CSS selectorsid, classes, types, attributes, values of attributes, etc.

Return Value: An object.

Look at the example below to know more about this method.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>How To Get Child Elements By Class Using JavaScript</title>
  <h1>Get Child Elements By Class Using JavaScript</h1>
  <h2>Solution 2: Using querySelectorAll() method</h2>
</head>
<body>
  <ul id="parent-class">
    <li class="child">Learn To Share IT</li>
    <li class="child">I am crvt4722</li>
	<li class="child">Get Child Elements</li>
    <li class="child">Tutorial made by LearnShareIT.</li>
  </ul>
</body>
<script>
var parent = document.querySelector('#parent-class');

// get all child elements in Class.
var elements = parent.querySelectorAll('.child');

for(i=0; i < elements.length ; i++)
	document.writeln("["+elements[i].innerHTML+"] ");
</script>
</html>

Output

Solution 3: Using getElementById() method

Syntax 

document.getElementById(elementID)

Parameters 

elementID: The id value of an element.

Return Value: An object.

Look at the example below to know more about this method.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>How To Get Child Elements By Class Using JavaScript</title>
  <h1>Get Child Elements By Class Using JavaScript</h1>
  <h2>Solution 3: Using getElementById() method</h2>
</head>
<body>
  <ul id="parent-class">
    <li class="child1">Learn To Share IT</li>
    <li class="child2">I am crvt4722</li>
	<li class="child3">Get Child Elements</li>
    <li class="child4">Tutorial made by LearnShareIT.</li>
  </ul>
</body>
<script>
var parent = document.getElementById('parent-class');

//get the first child element in Class.
var firstChild = parent.firstElementChild;

//get the last child element in Class.
var lastChild = parent.lastElementChild;

document.writeln("The first element: "+ firstChild.innerHTML);
document.writeln(". The last element: "+ lastChild.innerHTML);
</script>
</html>

Output

Summary

These are some solutions that can help you get child elements by using JavaScript. To solve this problem, you can use the querySelector() method, querySelectorAll() method and getElementById() method. Choose the solution that is the most suitable for you. We hope this tutorial is helpful to you. Have an exciting learning experience. Thanks!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *