Array.indexOf不是函数

在我的html代码中，我有20个input(<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

我在这里做错了什么？

Element.getElementsByTagName()方法返回一个具有给定标记名的元素的实时HTMLCollection

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

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

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

如上所述，您可以使用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)'>

好问题！这有点棘手！

之所以会发生这种情况，是因为.indexOf在数组上运行，而document.getElementsByTagName返回的是HTMLCollection，而不是数组。

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

请参阅此答案以了解更多详细信息！

相关内容