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:
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript
- Add Line breaks to a Textarea using JavaScript
Hi, guys! My name’s Scott Miller. My current job is a software developer and I have shared a lot of quality articles about Javascript, C, C++, C#, Python, PHP, R, Java programming languages. I’m hoping they can assist you.
Name of the university: HCMUS
Major: IT
Programming Languages: C, C++, Python, R, Java, JavaScript
