本文介绍了Docent.querySelectorAll()仅获取最后<；li>；项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望使用.glitch类存储所有项目的原始文本。因此，我使用document.querySelectorAll()获取所有这些项，但只存储最后<；li>；项。
HTML：
<nav id="nav-bar" class="nav-bar">
<ul>
<li id="1" class="focusable glitch">Home</li>
<li id="2" class="focusable glitch">Projects</li>
<li id="3" class="focusable glitch">Contact</li>
</ul>
</nav>
js：
document.querySelectorAll('.glitch').forEach(item => {
originalTexts[item] = item.innerHTML;
});
我在其中保存文本的字典(我又添加了两个条目，看它是否能得到它们)：
[object HTMLHeadingElement]: " Example Header"
[object HTMLLIElement]: "Contact"
[object HTMLParagraphElement]: "Example Paragraph"
如您所见，它只存储一个HTMLLIElement。如何将它们全部存储？
推荐答案
该行：
originalTexts[item] = item.innerHTML;
将item隐式转换为字符串，然后为结果属性赋值。所有li项的字符串将是相同的："[object HTMLLIElement]"。因此，第二个循环迭代向前覆盖前一个循环迭代的值。
您需要使用唯一标识符。要做到这一点，一种方法是将回调接收的索引作为第二个参数与字符串结合使用(或者，如果li都有ID，就像您的一样，这将是可行的)，但我想我会选择其他字符串作为名称的基础。
示例(但同样，我会选择其他字符串，而不是隐式将item转换为字符串)：
document.querySelectorAll('.glitch').forEach((item, index) => {
originalTexts[`${item}_${index}`] = item.innerHTML;
});
实时拷贝：
const originalTexts = {};
document.querySelectorAll('.glitch').forEach((item, index) => {
originalTexts[`${item}_${index}`] = item.innerHTML;
});
console.log(originalTexts);<nav id="nav-bar" class="nav-bar">
<ul>
<li id="1" class="focusable glitch">Home</li>
<li id="2" class="focusable glitch">Projects</li>
<li id="3" class="focusable glitch">Contact</li>
</ul>
</nav>这篇关于Docent.querySelectorAll()仅获取最后<；li>；项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！