IndexOf element in array [duplicate]

Answer 1

getElementsByClassName doesn't return an array, but an HTMLCollection. Thus, it doesn't have array methods like indexOf. You need to explicitly call array methods with a this value of the HTMLCollection like this:

var selected_id = Array.prototype.indexOf.call(arr, selected[0]);

Answer 2

It's because arr is a (live) NodeList not an array; what you want is, I think:

console.log([].indexOf.call(arr, selected[0]));

 var arr = document.getElementsByClassName('class');
 var selected = document.getElementsByClassName('selected');
 var selected_id = [].indexOf.call(arr, selected[0]);
 console.log(selected_id);

<div class="class"></div><div class="class"></div><div class="class selected"></div><div class="class"></div>

The line:

var selected_id = [].indexOf.call(arr, selected[0]);

Uses the native Array.prototype.indexOf() method, supplying the arr as the this (basically using arr as the array on which the method is called), supplying selected[0] as the argument to be passed to the method, so it sort of gets applied as you called it yourself:

var selected_id = arr.indexOf(selected[0]);

but does it in a way that recognises the indexOf() method isn't available to the NodeList object (calling it in a legitimate way, and therefore preventing the error).

References:

• Array.prototype.indexOf().
• document.getElementsByClassName().
• Function.prototype.call().

Answer 3

It's because document.getElementsByClassName('class') doesn't return an Array, but a NodeList which is an array-like object. You can turn an array-like object to an array by using:

var elements = document.getElementsByClassName('class');
var arr = Array.prototype.slice.call(elements);