document.querySelectorAll仅获得最后一个<li>项目

问题描述

我想使用.glitch类存储所​​有项目的原始文本。因此，我使用document.querySelectorAll()来获取所有这些，但是仅存储了最后一个

项。

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，就像您的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>

,

您应将项目的ID代替项目本身用作键，因为它将被转换为字符串，并且所有<li>元素都将转换为"[object HTMLLIElement]"。由于您总是将值分配给对象的相同属性，因此其值最终作为最后一个innerHTML元素的<li>。

const originalTexts = {};
document.querySelectorAll('.glitch').forEach(item => {
  originalTexts[item.id] = 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>

,

键是一个字符串，因此它在创建属性时正在执行item.toString（）。因此，为什么他们要互相覆盖。

您要么需要使用数组，要么使用属性唯一的东西。

// Array
const originalTexts = Array.from(document.querySelectorAll('.glitch')).map(item => item.innerHTML);

console.log(originalTexts)

// Using id
const originalTexts2 = Array.from(document.querySelectorAll('.glitch')).reduce((obj,item) => (obj[item.id] = item.innerHTML) && obj,{});

console.log(originalTexts2)

<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>