javascript - 将 DOM 元素插入变量并使用其属性与不使用变量执行相同操作之间的区别

Question

我正在尝试创建一个 JS 计算器。

<div class="container">
    <div class="input"></div>
    <button class="num" id="num1">1</button>
    <button class="num" id="num2">2</button>
    <button class="num" id="num3">3</button>
    <button class="num" id="num4">4</button>
    <button class="num" id="num5">5</button>
    <button class="num" id="num6">6</button>
    <button class="num" id="num7">7</button>
    <button class="num" id="num8">8</button>
    <button class="num" id="num9">9</button>
    <button class="num" id="num0">0</button>
    <button class="equal">=</button>
    <button class="plus">+</button>
    <button class="minus">-</button>
  </div>

我刚刚开始编写代码来显示被单击的数字，并且想知道为什么此代码有效:

    document.querySelectorAll('.num').forEach(el => {
      el.addEventListener('click', () => {
        document.querySelector('.input').textContent += el.textContent;
      })
    })

虽然此代码没有:

var value = document.querySelector('.input').textContent;
    document.querySelectorAll('.num').forEach(el => {
      el.addEventListener('click', () => {
        value += el.textContent;
      })
    })

它们不是一样的吗？唯一的区别是，在第二个示例中，变量保存 querySelector 和 textContent 属性。

Answer 1

var value = document.querySelector('.input').textContent;

该行的作用与您想象的不同。它不会在变量 value 中存储对元素文本内容的引用；相反，它存储值。这是一个字符串。在 JavaScript 中，字符串是不可变的，这意味着它们一旦创建就无法更改。当您执行诸如 value += 'hello' 之类的操作时，您实际上是在创建一个带有附加字符的新字符串，而原始字符串保持不变。

您想要做的是存储对 DOM 元素本身的引用，以便您可以在循环中为其 textContent 分配新值:

var element = document.querySelector('.input');
document.querySelectorAll('.num').forEach(el => {
  el.addEventListener('click', () => {
    element.textContent += el.textContent;
  })
})