How to get the child element of a parent using JavaScript ?
In this article, we will learn to get the child element of the parent using Javascript. Given an HTML document and the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. For this, there are 2 ways to get the child element:
- By using the children property
- By using querySelector Method
We will discuss both approaches & understand their implementation through the examples.
The DOM children property is used to return HTMLcollection of all the child elements of the specified element.
Approach 1:
- Select an element whose child element is going to be selected.
- Use .children property to get access of all the children of the element.
- Select the particular child based on the index.
Example 1: This example implements the .children property to get the HTMLcollection 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> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"></p> <div class="parent" id="parent"> Parent <div class="child"> Child </div> </div> <br> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style="font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); up.innerHTML = "Click on the button select the child node."; function GFG_Fun() { parent = document.getElementById('parent'); children = parent.children[0]; down.innerHTML = "Text of child node is - '" + children.innerHTML + "'"; } </script> </body> </html> |
Output:
class Property
The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.
Approach 2:
- Select the parent element whose child element is going to be selected.
- Use .querySelector() method on parent.
- Use the className of the child to select that particular child.
Example 1: This example implements the .querySelector() method to get the first element to match for 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> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <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> <p id="GFG_DOWN" style="font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); up.innerHTML = "Click on the button select the child node."; function GFG_Fun() { parent = document.getElementById('parent'); children = parent.querySelectorAll('.child'); down.innerHTML = "Text of child node is - '" + children[0].innerHTML + "' and '" + children[1].innerHTML + "'"; } </script> </body> </html> |
Output:
.querySelector() Method
Please Login to comment...