JavaScript：获取节点索引

在 JavaScript 中，通过获取节点的索引值，可以方便地遍历并处理节点，通常会使用querySelectorAll、getElementsByTagName等方法获取节点集合，然后利用循环遍历集合中的每一个节点，获取它们的索引值就能方便地对节点进行管理和操作。

使用 forEach 方法实现获取节点索引

forEach是一个用于数组的循环方法，通过遍历节点集合，可以方便地获取每个节点的索引。以下是一个示例代码块，用于获取ul元素中每个li元素的索引：

const ul = document.querySelector('ul');

Array.from(ul.children).forEach((li, index) => {
  console.log(`第 ${index} 个 li 元素是：${li}`);
});

使用 for 循环实现获取节点索引

在 JavaScript 中，用 for 循环可以获取到节点的索引值、长度和内容。以下代码块演示了如何使用 for 循环遍历一个节点集合，并获取其中每个元素的索引：

const lis = document.getElementsByTagName('li');

for (let i = 0; i < lis.length; i++) {
  console.log(`第 ${i} 个 li 元素是：${lis[i]}`);
}

使用 Array.prototype.indexOf 方法实现获取节点索引

使用 Array.prototype.indexOf 方法可以返回节点在集合中的索引位置，它接收一个参数，即要查找的节点对象。以下代码块演示了如何使用 Array.prototype.indexOf 方法获取节点索引：

const ul = document.querySelector('ul');
const liArr = Array.from(ul.children);
const li = lis[0];

const index = liArr.indexOf(li);

console.log(`li 元素位于 ul 集合中的索引位置是：${index}`); 

以上是常见地获取节点索引方法，在 JavaScript 中，还有很多其他的方法可以获取节点索引，这些方式都有各自的特点和用途，根据实际需求选取合适的方法使用就好了。