Array.indexOf 不是函数

Question

在我的 html 代码中，我有 20 个输入 (<input type='text'>) 元素。我想获取我关注的元素的索引；因此，在<body>结束之前，在<script>，我写了：

var inputs = document.getElementsByTagName('input');
function getIndex(el){
    console.log(inputs.indexOf(el));
}

并在 html 中的每个输入元素中添加以下内容：

<input type='text' onfocus='getIndex(this)'>

但控制台显示：

Uncaught TypeError: inputs.indexOf is not a function

我做错了什么？

Answer 1

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name

您可以使用 Array.from() 或 Spread syntax (...) 将集合制成数组

var inputs = document.getElementsByTagName('input');
function getIndex(el){
    console.log([...inputs].indexOf(el));
}

<input type='text' onfocus='getIndex(this)'>

Answer 2

如 here and here 所述，您可以使用 Array.prototype.indexOf.call 在 NodeList 上应用 Array indexOf() 函数。

const inputs = document.getElementsByTagName('input');
function getIndex(el) {
  console.log(Array.prototype.indexOf.call(inputs, el));
}

<input type='text' onfocus='getIndex(this)'>

Answer 3

好问题！这有点棘手！

发生这种情况是因为 .indexOf 在数组上运行，而 document.getElementsByTagName returns 不是数组 HTMLCollection。

您可以简单地将其转换为数组，然后使用它： var arr = [...htmlCollection]; 或 var arr = [].slice.call(htmlCollection);

查看此answer了解更多详情！

Array.indexOf is not a function