如何在 JavaScript 中获取子节点索引？

使用 JavaScript 可以轻松地获取元素的子节点并确定其在父节点中的索引。以下是几种方法：

1. childNodes 属性

childNodes 属性返回一个包含元素所有子节点的集合。这个集合是一个实时的，动态的 NodeList 对象。我们可以使用 indexOf() 方法来确定一个特定子节点在集合中的索引值。

const parent = document.getElementById('parent');
const childNodes = parent.childNodes;

const index = Array.prototype.indexOf.call(childNodes, child);

上面的代码会获取具有 id="parent" 的元素的所有子节点，然后使用 indexOf() 方法来查找具有 id="child" 的子节点在子节点集合中的索引。

2. children 属性

children 属性返回一个 HTMLCollection 对象，其中包含了元素的所有子元素。我们可以使用 indexOf() 方法来查找一个特定子元素在集合中的索引值。与 childNodes 相比，children 仅包含子元素，而不是包括文本节点等其他节点。

const parent = document.getElementById('parent');
const children = parent.children;

const index = Array.prototype.indexOf.call(children, child);

这行代码将返回具有 id="parent" 的元素的所有子元素，然后使用 indexOf() 方法来查找具有 id="child" 的子元素在子元素集合中的索引。

3. NodeList 中的 forEach

NodeList 对象除了可以使用 indexOf() 方法来获取元素索引值，还可以使用 forEach 方法来迭代节点集合，因此可以通过循环遍历节点集合来查找一个特定的子节点并获得其索引值。

const parent = document.getElementById('parent');
const childNodes = parent.childNodes;

let nodeIndex = null;

childNodes.forEach((node, index) => {
  if (node.id === 'child') {
    nodeIndex = index;
  }
});

这行代码将返回具有 id="parent" 的元素的所有子节点，使用 forEach() 方法在循环中查找具有 id="child" 的子节点并返回其索引值。

以上是在 JavaScript 中获取子节点索引的三种方法，您可以根据自己的需求选择其中任一方法。