Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 22 Nov, 2021
View Discussion
Improve Article
Save Article

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:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!