How to get the child element of a parent using JavaScript ?

22 Nov, 2021
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
bhaskargeeksforgeeks
JavaScript-Questions
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.