如何查找DOM元素的项引用？

Question

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

基本上没有span有任何标识符，并且所有标识符都嵌套在其他具有很长Xpath的对象中，这对象使用起来不方便。

鉴于所有span形成数组，如组，从0到999开始，我们想知道每个单元的项目引用是什么选择，说span 1000我们会做：

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

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

我在Firefox和Chrome的当前版本中没有找到任何方法，但也许我在开发工具中错过了它，或者可以使用一些调整。

_{这个问题纯粹是理论上的，要求提供一般知识，而不是具体案例。因此，在这种情况下，我没有特定的代码可以分享。}

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 Hack

另一种可能性是将无序列表更改为有序列表，它将显示元素的数量。请记住，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>