How to get the child element of a parent using JavaScript ? (original) (raw)

Last Updated : 09 Sep, 2024

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.

Below are the approaches to get the child element of a parent using JavaScript:

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 propertyto get the HTML collection of all the child elements of the specified element.

HTML `

<style>
    .parent {
        background: green;
        color: white;
    }

    .child {
        background: blue;
        color: white;
        margin: 10px;
    }
</style>

GeeksforGeeks

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

`

**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() methodon 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 `

<style>
    .parent {
        background: green;
        color: white;
    }

    .child1 {
        background: blue;
        color: white;
        margin: 10px;
    }

    .child2 {
        background: red;
        color: white;
        margin: 10px;
    }
</style>

GeeksforGeeks

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

`

**Output:

.querySelector() Method