Get The Index Of A Child Node Using JavaScript

Get the Index of a Child node using JavaScript

To get the index of a child node using JavaScript you can use Array.prototype.indexOf.call() method. Read from the beginning to the end of this article to find out how to do it.

Get the index of a child node using JavaScript

Using Array.prototype.indexOf.call() method

Here, we will get the Index of a child node using Array.prototype.indexOf.call(). First, we will select the child node of the parent node. Second, we will select the parent node by using the.parentNode property. Finally, we use Array.prototype.indexOf.call() to get the index of a child node. 

Let’s check out the syntax and code example below:

Syntax:

Array.prototype.indexOf.call(child_of_parent, current_child)

Parameters:

  • child_of_parent: The children of the parent.
  • current_child: The current children you want to get the index.

Return: The index of current children.

Code example:

idx.html

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .parent {
            background: rgb(0, 128, 2);
            color: rgb(0, 0, 0);
            font-size: 26px;
        }

		#children_1 {
            background: blue;
            color: black;
            margin: 20px;
        }

		#children_2 {
            background: rgb(255, 0, 195);
            color: black;
            margin: 20px;
        }

        #children_3 {
            background: rgb(255, 98, 0);
            color: black;
            margin: 20px;

        }
        #children_4 {
            background: rgb(255, 0, 38);
            color: black;
            margin: 20px;

        }
        #set_down {
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body style = "text-align:left;">
    <h1 style = "color:blueviolet;">
        LearnShareIT
    </h1>
    <p id="set_up"
        style="font-size: 30px;">
    </p>
    <div class = "parent" id = "parent">
        Parent
        <div id = "children_1">
            Children 1
        </div>

        <div id = "children_2">
            Children 2
        </div>

        <div id = "children_3">
            Children 3
        </div>

        <div id = "children_4">
            Children 4
        </div>
    </div>
    <br>
    
    <button onclick = "set_function()">
        Click me
    </button>

    <p id = "set_down"></p>
    <script src = "idx.js"></script>
</body>
</html>

idx.js

var set_up = document.getElementById('set_up');
var set_down = document.getElementById('set_down');
set_up.innerHTML = "Click button to get the index of child node.";

function set_function() {
    var child_node = document.getElementById('children_2');
    var parent_node = child_node.parentNode;
    set_down.innerHTML = "The index of 'children_2' node is = "
    + Array.prototype.indexOf.call
    (parent_node.children, child_node);
}

Output:

Using the indexOf() method

To get the index of child node, first we will use the Array.from() method to convert a set of child nodes to an array. Then, we use indexOf() to get the index of the child node which we want to find. Follow the example below to understand easily.

idx.html

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .parent {
            background: rgb(0, 128, 2);
            color: rgb(0, 0, 0);
            font-size: 26px;
        }

		#children_1 {
            background: blue;
            color: black;
            margin: 20px;
        }

		#children_2 {
            background: rgb(255, 0, 195);
            color: black;
            margin: 20px;
        }

        #children_3 {
            background: rgb(255, 98, 0);
            color: black;
            margin: 20px;

        }
        #children_4 {
            background: rgb(255, 0, 38);
            color: black;
            margin: 20px;

        }
        #set_down {
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body style = "text-align:left;">
    <h1 style = "color:blueviolet;">
        LearnShareIT
    </h1>
    <p id="set_up"
        style="font-size: 30px;">
    </p>
    <div class = "parent" id = "parent">
        Parent
        <div id = "children_1">
            Children 1
        </div>

        <div id = "children_2">
            Children 2
        </div>

        <div id = "children_3">
            Children 3
        </div>

        <div id = "children_4">
            Children 4
        </div>
    </div>
    <br>
    
    <button onclick = "set_function()">
        Click me
    </button>

    <p id = "set_down"></p>
    <script src = "idx.js"></script>
</body>
</html>

idx.js

var set_down = document.getElementById('set_down');
set_up.innerHTML = "Click on the button get the index of child element.";

function set_function() {
    var child_node = document.getElementById('children_3');
    set_down.innerHTML = "The index of 'children_3' node is = "
    + Array.from(child_node.parentNode.children).indexOf(child_node);
}

Output:

Summary

The above are all simple ways to get the index of a child node using JavaScript that I share with you. If you have any questions, don’t forget to comment below.

Thank you for spending time with this article. So, good luck!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *