已知NodeList及其中的DOM元素，如何查找该元素的索引？

嘿，这个问题我日常开发里经常碰到，刚好给你梳理几个实用的方法，还有不同场景下的最优选择逻辑～

首先得明确：NodeList本身不是数组（虽然它有length属性和可遍历的特性），所以不能直接用数组的indexOf方法，得先做些转换或者手动处理。

方法1：转成数组后用indexOf（ES6+ 简洁方案） #

如果你的项目环境支持ES6及以上（现在大部分现代浏览器都没问题），这是最省心的写法：

// 获取目标NodeList和要查找的元素
const nodeList = document.querySelectorAll('.your-selector');
const targetElement = document.querySelector('.target-element');

// 用扩展运算符转成数组，再调用indexOf
const index = [...nodeList].indexOf(targetElement);
// 或者用Array.from转换
// const index = Array.from(nodeList).indexOf(targetElement);

• 优点：代码简洁、可读性拉满，底层引擎对数组方法的优化也能保证效率
• 注意：如果没找到目标元素，会返回-1，和数组indexOf的行为一致

方法2：手动遍历（兼容旧浏览器方案） #

要是需要兼容IE11这类不支持ES6的旧环境，手动遍历是最稳妥的选择：

function getNodeIndex(nodeList, target) {
  // 遍历NodeList的每一项
  for (let i = 0; i < nodeList.length; i++) {
    // 严格匹配DOM元素（引用相等）
    if (nodeList[i] === target) {
      return i;
    }
  }
  // 没找到返回-1
  return -1;
}

// 使用示例
const nodeList = document.querySelectorAll('.your-selector');
const targetElement = document.querySelector('.target-element');
const index = getNodeIndex(nodeList, targetElement);

• 优点：兼容性拉满，所有支持DOM的浏览器都能跑
• 注意：遍历是线性的，对于超大的NodeList（比如上百个元素），效率和数组方法差不多，不用太担心性能问题

最优方案怎么选？ #

• 现代环境（支持ES6+）：优先用[...nodeList].indexOf(target)或者Array.from(nodeList).indexOf(target)，代码简洁又高效
• 需要兼容旧浏览器：选手动遍历的方法，保证所有环境都能正常工作

另外提个小细节：querySelectorAll返回的是静态NodeList，转换数组后不会受DOM变化影响；但如果是动态NodeList（比如element.childNodes），转换前要确保NodeList的状态是你需要的哦～

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