如何用JavaScript的indexOf.call方法获取跨父节点的同类DOM元素索引

参考DOM结构 #

<ul class="main-products">
  <li class="product">product</li>
  <li class="product">product</li>
  <li class="product">product</li>
</ul>
<section class="banner"></section>
<ul class="sidebar-products">
  <li class="product">product</li>
  <li class="product" id="element">product</li> <!-- 该元素是第5个product -->
  <li class="product">product</li>
</ul>

问题原因 #

你原代码的查询范围被限制在目标元素的父节点（即.sidebar-products）的子元素集合内，仅统计了侧边栏内的3个product元素，因此只能拿到元素在侧边栏内的索引1，无法匹配全局计数规则。

解决方案 #

将查询范围调整为全局所有匹配.product类的元素，按DOM树顺序统计索引即可，修改后代码如下：

// 获取目标元素
const targetElement = document.querySelector('li#element');
// 按DOM树顺序获取全局所有class为product的元素，转为数组后查询索引
const productList = Array.from(document.querySelectorAll('.product'));
const globalIndex = productList.indexOf(targetElement);

代码说明 #

• document.querySelectorAll('.product') 会按照DOM结构从上到下的顺序匹配所有带有product类名的元素，返回类数组结构NodeList
• 用Array.from将NodeList转为普通数组后，调用indexOf方法查找目标元素的位置，得到的就是你需要的全局索引值4

内容的提问来源于stack exchange，提问作者Ethan Park