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

标签 javascript html css dom reference

考虑一个包含大约 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 中找到任何方法,但也许我在开发工具中遗漏了它,或者可以为此使用一些调整。


此问题纯理论性,要求的是一般知识,而不是具体案例。因此,在这种情况下,我没有要分享的具体代码。

最佳答案

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

改变

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

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

来自 DevTools

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

Getting index in DevTools

装饰元素

可以选择元素,遍历它们,并为每个元素添加一个属性及其在 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>

关于javascript - 如何找到 DOM 元素的元素引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46058355/

相关文章:

javascript - 如何获取从字符串末尾开始计数的indexof()

javascript - Internet Explorer 中的 Ajax 可靠下拉列表问题

javascript - 在 Node.js 中难以停止子进程生成中的流?

javascript - 如何用纯javascript检测HTML隐藏属性

jquery - 通过 jQuery 在 DIV 之间复制选定的 CSS 样式

javascript - 如果您尝试编辑,光标会跳到字段末尾

html - 纯css渐变

javascript - 在 AngularJS 中通过 AJAX 加载数据后如何重新初始化数据表?

html - 悬停子列表时更改列表选项的颜色

html - 行内横线