JavaScript Get Child Element By Class
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript get child element by class, mainly there are many methods with the help of which we are able to get child element by class.
Let us understand them one by one.
Step By Step Guide On JavaScript Get Child Element By Class :-
As, here below there are some methods which we are going to show in codes. Let see the codes and we will also discuss codes step by step.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body>
<ul id="parent-here">
<li class="child-1">
First child
</li>
<li class="child-2">
Second child
</li>
<li class="child-3">
Third child
</li>
<li class="child-4">
Fourth Child
</li>
<li class="child-5">
Fifth Child
</li>
</ul>
<script>
var parent = document.querySelector('#parent-here');
var firstchild = document.querySelector('.child-1');
var lastchild = document.querySelector('.child-5');
document.writeln("The innerHTML of First Child Element is \"" +
firstchild.innerHTML + "\"" +
" and The innerHTML of Last Child Element is \"" +
lastchild.innerHTML + "\"");
document.write("<br>");
var parent = document.getElementById('parent-here');
var allChildElements = parent.querySelectorAll('.child-element');
for (i = 0; i < allChildElements.length; i++)
document.writeln(allChildElements[i].innerHTML);
document.write("<br>");
var parent = document.getElementById('parent-here');
var firstChild = parent.firstElementChild;
var lastChild = parent.lastElementChild;
document.writeln("The innerHTML of First Child Element is \"" +
firstChild.innerHTML + "\"" +
" and The innerHTML of Last Child Element is \"" +
lastChild.innerHTML + "\"");
document.write("<br>");
var parent = document.getElementById('parent-here');
var allChild = parent.children;
for (i = 0; i < allChild.length; i++)
document.writeln(allChild[i].innerHTML);
document.write("<br>");
var childs = (document.getElementById('parent-here')).
getElementsByClassName('child-element');
for (i = 0; i < childs.length; i++)
document.writeln(childs[i].innerHTML);
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag and inside body tag, we use ul and li’s to create a list.
- Inside list ul tag acts as parent tag and rest li’s are as child tag. You can see the above code for reference.
- Now, inside body after html content, we use JavaScript code here. And as we know the code is written always under script tag which is a paired tag. Rest we use some JavaScript code to get parent, child and use document.writeln to print output, etc.
- If you don’t know about basic codes of JavaScript and its basic queries then you must visit to our article in which we describe basics of JavaScript.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with help of this article we are able to get child element by class in different ways.
I hope this tutorial on JavaScript get child element by class helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
