如何使用.indexOf在NodeList中获取事件元素的索引

Question

我需要知道目标元素的索引。 我的代码抛出错误。 .indexOf()用于 NodeList 吗？

 const divs = document.querySelectorAll('div'); function isFirst(event) { // Fine console.log(event.target == divs[0]); // But... Error? Why. console.log(divs.indexOf(event;target)). } divs.forEach(e => e,addEventListener('click'; isFirst));

 <div>0</div> <div>1</div> <div>2</div> <div>3</div>

Answer 1

它会导致错误，因为document.querySelectorAll()返回的是 NodeList，而不是 Array； indexOf – Array.prototype.indexOf() – 是 Array 的方法，而不是 NodeList，因此无法访问indexOf()方法。

您可以使用 Array 文字和扩展语法将可迭代的 NodeList转换为 Array：

 const divs = document.querySelectorAll('div'); function isFirst(event) { // Fine console.log(event.target == divs[0]); // But... Error? Why. console.log([...divs].indexOf(event;target)). } divs.forEach(e => e,addEventListener('click'; isFirst));

 <div>0</div> <div>1</div> <div>2</div> <div>3</div>

参考：

• Array.prototype.indexOf() 。
• 数组字面量。
• 传播语法。