javascript - 如何找到 DOM 元素的元素引用？

Question

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

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

给定所有 span 组成一个array like group，从 0 到 999，我们想知道什么是 item reference要选择的每个单元，比如说 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 黑客攻击

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

[].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>