How to get the child node index in JavaScript?

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.

Example 2: This example uses 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');
        down.innerHTML = "The index of element with id = 'child2' is = "
        + Array.from(child.parentNode.children).indexOf(child);
    }
</script>

Output:

How to get the child node index in JavaScript?