JavaScript如何获取querySelectorAll()返回DOM数组各元素的索引

首先先修正你示例代码里的两处小问题：

1. var是JavaScript保留关键字，不能作为变量名使用
2. 选择器方法拼写错误，正确写法是querySelectorAll

另外补充说明：document.querySelectorAll()返回的不是真正的数组，是类数组结构的NodeList对象，你打印看到的类数组结构就是这个类型的实例，要获取其中每个元素对应的索引，有以下几种常用方案：

• 方案1：直接使用NodeList自带的forEach方法（现代浏览器都支持）
  forEach方法的回调函数第二个参数就是当前元素对应的索引，从0开始计数：

const domList = document.querySelectorAll('.class');
domList.forEach((item, index) => {
  // 此处index就是当前元素的索引
  console.log('元素索引：', index, '对应DOM元素：', item);
})

• 方案2：转为真数组后调用数组遍历方法（兼容性更好，支持所有数组原生API）
  可以用Array.from()或者展开运算符...将NodeList转为真正的数组，之后调用任意数组遍历方法都可以拿到索引：

const domList = document.querySelectorAll('.class');
// 用Array.from转换
Array.from(domList).map((item, index) => {
  console.log(index, item);
})

// 用展开运算符转换
[...domList].forEach((item, index) => {
  console.log(index, item);
})

• 方案3：传统for循环（兼容所有老旧浏览器，包括IE）

const domList = document.querySelectorAll('.class');
for (let i = 0; i < domList.length; i++) {
  const item = domList[i];
  // 循环变量i就是当前元素的索引
  console.log(i, item);
}

如果是需要在元素绑定的事件中获取索引，以上方案拿到的索引都是准确的，注意不要用var声明循环变量，避免出现闭包导致所有元素拿到的索引都是最终值的问题。

内容的提问来源于stack exchange，提问作者ray_milan