Question

我创建了一个简单的html＆amp; javascript文件，我试图在点击时获取元素索引，为什么我得到“indexOf不是一个函数”？继承人代码：

<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
<button id="1">5</button>

<script>

    var items = document.getElementsByTagName('button');
        for(var i = 0; i < items.length; i++) {
            items[i].addEventListener('click', function(){
                var ind = items.indexOf(this);
                console.log(ind);
            });
        }
</script>

Answer 1

indexOf是在Array对象上找到的方法。

getElementsByTagName返回一个实时HTMLCollection，而不是一个数组。它在很多方面都是类似数组的（例如，它具有数字索引属性和length）但它没有数组的所有属性。

您可以访问Array（或Array构造函数的原型）的indexOf属性，并使用.call()或.apply()在其中使用它HTMLCollection对象。

Answer 2

原因是@Quentin提到了一个。

要解决此问题，您可以使用HTMLCollection从Array.prototype.slice创建一个新数组：

var items = document.getElementsByTagName('button');
items = Array.prototype.slice.call(items);
...

您可以在此处详细了解如何使用.slice将类似数组的对象转换为数组：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Array-like_objects

ES2015替代

使用ES2015，你有一些更惯用的选择：

var items = document.getElementsByTagName('button');
items = Array.from(items);

或：

var items = document.getElementsByTagName('button');
items = [...items];

Answer 3

document.getElementsByTagName returns an HTMLCollection，不是数组。 HTMLCollections没有indexOf方法，这就是您收到此错误的原因。

您可以将列表转换为数组，这意味着您可以使用indexOf。

var items = [].slice.call(document.getElementsByTagName('button')

Answer 4

我可以通过闭包函数来获取元素索引!!

var items = document.getElementsByTagName('button');
for(var i = 0; i < items.length; i++) {
(function (a){
               items[i].addEventListener('click', function(){
               var ind = items[a];
               console.log(ind);
            });
})(i);
}

当点击按钮时我得到“indexOf不是函数”，为什么？

4 个答案: