JavaScript Get Child Element By Tag
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of JavaScript get child element by tag, in previous tutorials, we understand that how we can get child elements by class and in this we will show you the same task as previous but with the help of tag.
Now, let’s understand the article with the help of codes.
As, there are many methods with the help of which we can complete this article. As there are many ways to done this.
Step By Step Guide On JavaScript Get Child Element By Tag :-
Now, here below we are going to show you a code in which we use html and JavaScript. And show the most used and say most preferred method to get child elements by tag name.
<!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>
<div id="parent">
i am main or parent div
<p>
paragraph
</p>
<div id="a"> div a is here </div>
<div id="b"> div b is here
<div id="b1">Grandson div b1 is here</div>
</div>
<div id="c"> div c is here</div>
<h4>
headings
</h4>
</div>
<script>
var child = document.getElementById('parent').getElementsByTagName('div');
for (i = 0; i < child.length; i++)
document.writeln(child[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. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, we create a main div with id parent, and inside this parent we create some divisions, paragraphs and headings also.
- Now, our task is to get child elements with tag name. The div that we create inside main div has id’s with some values.
- Now let us understand script tag which is paired tag and we write our JavaScript code inside this tag. Here, we create a variable with name child and stored all the values of child elements with next line.
- At last we use for loop to print all elements that we get with help of tag name.
- 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 the help of this article we are able to understand how to get child element by tag name in JavaScript.
I hope this tutorial on JavaScript get child element by tag helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
