Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 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:

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!