如何在JS中找到节点列表中项目的索引

在JS中，我们经常需要处理DOM元素。在某些情况下，我们需要找到节点列表中元素的索引。本文将介绍如何在JS中找到节点列表中项目的索引。

获取节点列表

首先，我们需要获取节点列表。通常，我们使用querySelectorAll或getElementsByTagName方法获取节点列表。

const nodeList = document.querySelectorAll(".my-class");

这个代码片段获取所有Class为my-class的元素节点。

找到节点的索引

接下来，我们需要找到某个节点在列表中的索引。我们可以使用Array.prototype.indexOf()方法来查找节点的索引。但是，在节点列表中，元素并不是一个数组，而是一个类数组对象，因此我们需要将它转换为一个数组。

const nodeList = document.querySelectorAll(".my-class");
const nodeArray = Array.prototype.slice.call(nodeList);

const index = nodeArray.indexOf(node);

其中node为我们要查找索引的节点。

完整代码

const nodeList = document.querySelectorAll(".my-class");
const nodeArray = Array.prototype.slice.call(nodeList);

const node = document.querySelector(".my-class");
const index = nodeArray.indexOf(node);
console.log(index);

这个代码片段会打印节点node在列表nodeArray中的索引。

需要注意的是，在使用indexOf方法时，如果搜索的元素没有被找到，则返回-1。

总之，以上是如何在JS中找到节点列表中项目的索引的方法，希望对你有所帮助。