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;"> zambiatek </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;"> zambiatek </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?
