Open In App

How to get the child node index in JavaScript?

Improve
Improve
Like Article
Like
Save
Share
Report

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?

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?

How to get the child node index in JavaScript?



Last Updated : 23 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads