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

How to get the type of DOM element using JavaScript ?

In this article, we will learn to get the child element of the parent using JavaScript. Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript.

There are 2 ways to get the child element:

Table of Content

By using the children property
By using the querySelector Method

By using the children property

The DOM children property is used to return an HTML collection of all the child elements of the specified element.
Select an element whose child element is going to be selected.
Use .children property to get access to all the children of the element.
Select the particular child based on the index.

Example: This example implements the .children property to get the HTML collection 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;">
        w3wiki
    </h1>
 
    <h3>
        Click on the button select the child node
    </h3>
 
    <div class="parent" id="parent">
        Parent
        <div class="child"> Child </div>
    </div>
    <br>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h1 id="result" style="color: green;"></h1>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            parent = document.getElementById('parent');
            children = parent.children[0];
            res.innerHTML = "Text of child node is - '" +
                children.innerHTML + "'";
        }
    </script>
</body>
 
</html>

Output:

class Property

By using the querySelector Method

The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.
Select the parent element whose child element is going to be selected.
Use .querySelector() method on the parent.
Use the className of the child to select that particular child.

Example: This example implements the .querySelector() method to get the first element to match 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;">
        w3wiki
    </h1>
 
    <h3>
        Click on the button select 
        the child node
    </h3>
 
    <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>
     
    <h1 id="result" style="color: green;"></h1>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let  parent = document.getElementById('parent');
            let children = parent.querySelectorAll('.child');
            res.innerHTML = "Text of child node is - '" + 
                children[0].innerHTML + "' and '" + 
                children[1].innerHTML + "'";
        }
    </script>
</body>
 
</html>

Output:

.querySelector() Method

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

How to get the type of DOM element using JavaScript ?