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

问：

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

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>

JavaScript DOM ECMAScript-6

评论

1赞 Felix Kling 9/22/2022

“错误！为什么？ 不是数组，因此没有方法。divsindexOf

1赞 Andy 9/22/2022

节点列表不是一个真正的数组，因此大多数数组方法都不可用（我认为可能是唯一的）。forEach

0赞 Felix Kling 9/22/2022

更多信息： developer.mozilla.org/en-US/docs/Web/API/NodeList

答：

1赞 David Thomas 9/22/2022 #1

它会导致错误，因为返回的是 NodeList，而不是 Array;和 – – 是 Array 的方法，而不是 NodeList，因此无权访问该方法。document.querySelectorAll()indexOfArray.prototype.indexOf()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>

引用：

上一个：事件侦听器在激活时累积并运行多次（JavaScript）

下一个：创建调用函数的 for 循环时遇到问题（javascript）