如何找到DOM元素的项目引用？

Question

考虑一个巨大的DOM，其中包含大约10,000个HTML元素，它们之间有1,000个span标签。

基本上没有span有任何标识符，并且所有嵌套在其他对象的内部深处，它们具有非常长的Xpath ，因此无法使用。

给定所有span组成一个类似group的数组 ，从0到999，我们想知道每个单元的项目引用是什么，因此要选择，例如span 1000，我们将执行以下操作：

let mySpan = document.querySelector('span')[999];

是否有办法知道该特定span元素（或与此相关的任何其他元素）的项目引用是什么？

我在当前的Firefox和Chrome版本中找不到任何方法，但是也许我在devtool中错过了它，或者可以对此进行一些调整。

---

_{这个问题纯粹是理论上的问题，需要一般知识，而不是特定情况。 因此，在这种情况下，我没有要共享的特定代码。}

Answer 1

如果使用querySelectorAll ，它将返回一个NodeList 。 NodeList有一个item方法。

更改

let mySpan = document.querySelector('span')[999]; 至

let mySpan = document.querySelectorAll('span').item(999);

从DevTools

可能有一种更简单的方法，但是一种方法是检查所需的元素，从上下文菜单中选择“复制选择器”，然后粘贴选择器。 它会告诉你nth-child 。

装饰元素

可以选择元素，遍历它们，并在NodeList中为其每个索引添加一个属性。 该脚本可以在DevTools控制台中运行。 检查元素将显示data-idx属性，如以下示例所示：

<span data-idx="3">foo</span>

 [].forEach.call(document.querySelectorAll('#js_by span span'), (span, idx) => span.dataset.idx = idx); 

 <div id="js_by"> <div> <ul> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> </ul> </div> </div> 

备用HTML骇客

另一种可能性是将无序列表更改为有序列表，它将显示元素的数量。 请记住， NodeList具有从零开始的索引，而有序列表则从1开始计数。

 [].forEach.call(document.querySelectorAll('#js_by ul'), ul => { let ol = document.createElement('ol'); let parent = ul.parentElement; ol.innerHTML = ul.innerHTML; parent.removeChild(ul); parent.appendChild(ol); }); 

  <div id="js_by"> <div> <ul> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> <li> <a href="#"><span><span>foo</span></span></a> </li> </ul> </div> </div>