数组中的IndexOf元素[重复]答案

【问题标题】：IndexOf element in array [duplicate]数组中的IndexOf元素[重复]
【发布时间】：2014-11-09 15:43:04
【问题描述】：

我尝试从元素数组中获取索引。

 var arr = document.getElementsByClassName('class'); //3 elements

 console.log(arr);
 output// [div.class.selected, div.class, div.class, item: function, namedItem: function]

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

最后一行代码给我一个错误Uncaught TypeError: undefined is not a function。我也尝试添加toString()并搜索，但同样的错误。

【问题讨论】：

标签： javascript dom

【解决方案1】：

这是因为arr 是一个（活动的）NodeList 而不是一个数组；我想你想要的是：

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);

&lt;div class="class"&gt;&lt;/div&gt;&lt;div class="class"&gt;&lt;/div&gt;&lt;div class="class selected"&gt;&lt;/div&gt;&lt;div class="class"&gt;&lt;/div&gt;

行：

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

使用本机Array.prototype.indexOf() 方法，提供arr 作为this（基本上使用arr 作为调用该方法的数组），提供selected[0] 作为要传递给方法，所以它有点会像你自己调用的那样被应用：

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

但是以一种识别indexOf() 方法对NodeList 对象不可用的方式进行处理（以合法的方式调用它，从而防止错误）。

参考资料：

【讨论】：

如果你想处理一个 HTMLCollection 并将其转换为一个 javascript 数组。从 ES6 开始，可以使用：var arr = Array.from ( yourHtmlCollection ); 然后你可以在它上面调用“indexOf”var index = arr.indexOf( anElementOfThisArray );

【解决方案2】：

getElementsByClassName 不返回一个数组，而是一个HTMLCollection。因此，它没有像indexOf 这样的数组方法。您需要使用HTMLCollection 的this 值显式调用数组方法，如下所示：

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

【讨论】：

【解决方案3】：

这是因为document.getElementsByClassName('class') 不返回Array，而是返回NodeList，它是一个类似数组的对象。您可以使用以下方法将类似数组的对象转换为数组：

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

【讨论】：