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 selectors: id, 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 selectors: id, 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:
- Disable an Element by ID using JavaScript
- Change the Text of a Label element using JavaScript
- Get an Element by Name attribute using JavaScript
My name is Thomas Valen. As a software developer, I am well-versed in programming languages. Don’t worry if you’re having trouble with the C, C++, Java, Python, JavaScript, or R programming languages. I’m here to assist you!
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Java, Python, JavaScript, R