如何获取由 querySelectorAll() 方法 (javascript) 生成的 DOM 数组的每个元素的索引？

Posted 2023-03-05

【中文标题】如何获取由 querySelectorAll() 方法 (javascript) 生成的 DOM 数组的每个元素的索引？

【英文标题】：How To get the Index of each element of the DOM array made by the querySelectorAll() method (javascript)?

【发布时间】：2021-12-23 08:47:07

【问题描述】：

let var = document.querySelectoAll('.class')

console.log(var) = Array[15] 

（数组由 15 个元素组成）

【问题讨论】：

我不清楚你在问什么。您能否详细说明问题以及您的尝试未按预期工作的原因是什么？

querySelectorAll 返回一个NodeList，而不是一个数组。

尽量不要使用 Dom.methods。在渲染中创建一个数组并循环，并通过 map.key 获取每个选择器索引。

【参考方案1】：

您可以为此使用NodeList.entries()：

const nodes = document.querySelectorAll('.class');
for (const [index, node] of nodes.entries()) 
    console.log(index);
    console.log(node);