How to get the child node index in JavaScript? - GeeksforGeeks

12 Sep, 2019
The task is to get the index of child element among other children. Here are few techniques discussed.Approach 1:
Select the child element of 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.
<!DOCTYPE HTML><html>  <head>    <title>        How to get the child node index in 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;">          GeeksForGeeks      </h1>    <p id="GFG_UP"       style="font-size: 15px;              font-weight: bold;">    </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"       style="font-size: 24px;              font-weight: bold;              color: green;">    </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></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Select the child element of parent element.
First select the parent and then select the all children of parent element.
make an array of children and use indexOf() method to get the index.
Example 2: This example using the approach discussed above.
<!DOCTYPE HTML><html>  <head>    <title>        How to get the child node index in 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;">          GeeksForGeeks      </h1>    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">    </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"       style="font-size: 24px;               font-weight: bold;              color: green;">    </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></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Set the value of an input field in JavaScript
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?