考虑一个包含大约 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
.
装饰元素
可以选择元素,遍历它们,并为每个元素添加一个属性及其在 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/