Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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!