How to get the child node index in JavaScript?

Last Updated : 23 Jan, 2023

The task is to get the index of child elements among other children. Here are a few techniques discussed.

Approach 1:

Select the child element of the parent element.
Select the parent by .parentNode property.
Use Array.prototype.indexOf.call(Children_of_parent, current_child) to get the index.

Example 1: This example using the approach discussed above.

html

<style>
    .parent {
        background: green;
        color: white;
    }
    
    #child1 {
        background: blue;
        color: white;
        margin: 10px;
    }
    
    #child2 {
        background: red;
        color: white;
        margin: 10px;
    }
</style>
<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<div class="parent" id="parent">
    Parent
    <div id="child1">
        Child1
    </div>

    <div id="child2">
        Child2
    </div>
</div>
<br>
<button onclick="GFG_Fun()">
    click here
</button>

<p id="GFG_DOWN">
</p>
<script>
    var up = document.getElementById('GFG_UP');
    var down = document.getElementById('GFG_DOWN');
    up.innerHTML =
    "Click on the button get the index of child element.";
    
    function GFG_Fun() {
        var child = document.getElementById('child2');
        var parent = child.parentNode;
        down.innerHTML =
        "The index of element with id = 'child2' is = "
        + Array.prototype.indexOf.call(parent.children, child);
    }
</script>

Output:

How to get the child node index in JavaScript?

Approach 2:

Select the child element of the parent element.
First, select the parent and then select all children of the parent element.
make an array of children and use the indexOf() method to get the index.