In this article, we will learn to get the child element of the parent using JavaScript. Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript.
There are 2 ways to get the child element:
Table of Content
By using the children property
- The DOM children property is used to return an HTML collection of all the child elements of the specified element.
- Select an element whose child element is going to be selected.
- Use .children property to get access to all the children of the element.
- Select the particular child based on the index.
Example: This example implements the .children property to get the HTML collection of all the child elements of the specified element.
HTML
<!DOCTYPE HTML><html>
<head>
<title>
Finding child element of parent
with pure JavaScript
</title>
<style>
.parent {
background: green;
color: white;
}
.child {
background: blue;
color: white;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button select the child node
</h3>
<div class="parent" id="parent">
Parent
<div class="child"> Child </div>
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<h1 id="result" style="color: green;"></h1>
<script>
let res = document.getElementById('result');
function GFG_Fun() {
parent = document.getElementById('parent');
children = parent.children[0];
res.innerHTML = "Text of child node is - '" +
children.innerHTML + "'";
}
</script>
</body>
</html>
|
Output:
class Property
By using the querySelector Method
- The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.
- Select the parent element whose child element is going to be selected.
- Use .querySelector() method on the parent.
- Use the className of the child to select that particular child.
Example: This example implements the .querySelector() method to get the first element to match the specified CSS selector(s) in the document.
HTML
<!DOCTYPE HTML><html>
<head>
<title>
How to get the child element of
a parent using JavaScript ?
</title>
<style>
.parent {
background: green;
color: white;
}
.child1 {
background: blue;
color: white;
margin: 10px;
}
.child2 {
background: red;
color: white;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button select
the child node
</h3>
<div class="parent" id="parent"> Parent
<div class="child child1"> Child1 </div>
<div class="child child2"> Child2 </div>
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<h1 id="result" style="color: green;"></h1>
<script>
let res = document.getElementById('result');
function GFG_Fun() {
let parent = document.getElementById('parent');
let children = parent.querySelectorAll('.child');
res.innerHTML = "Text of child node is - '" +
children[0].innerHTML + "' and '" +
children[1].innerHTML + "'";
}
</script>
</body>
</html>
|
Output:
.querySelector() Method