如何通过存储textContent的变量修改DOM文本而非重赋值变量？

首先明确结论：无法直接通过存储textContent字符串值的变量x修改原<h1>元素的textContent，但可以通过封装逻辑的方式，实现不用直接存储元素对象就能通过变量修改目标属性的效果。

为什么直接赋值x无效？ #

document.querySelector('h1').textContent返回的是字符串原始值，JavaScript中原始值（字符串、数字、布尔等）的赋值是值传递——变量x拿到的只是原字符串的副本，而非对元素属性的引用。所以修改x只是改变这个副本的值，完全不会影响原元素的textContent。

替代实现方案 #

如果不想直接存储<h1>元素对象，可以用以下两种方式封装逻辑：

1. 带getter/setter的对象

创建一个对象，通过getter读取元素的textContent，通过setter修改它：

const x = {
  get value() {
    return document.querySelector('h1').textContent;
  },
  set value(newText) {
    document.querySelector('h1').textContent = newText;
  }
};

// 读取当前文本
console.log(x.value);
// 修改文本，同时更新<h1>内容
x.value = 'Hi.';

2. 函数式封装

把x定义为函数，通过是否传参来区分读取和修改操作：

function x(newText) {
  const h1 = document.querySelector('h1');
  if (arguments.length === 0) {
    return h1.textContent;
  }
  h1.textContent = newText;
}

// 读取文本
console.log(x());
// 修改文本
x('Hi.');

这两种方案都不需要直接把元素对象存在变量里，但本质上每次操作都会重新查询DOM（如果元素不会动态变化，也可以在内部缓存查询结果，进一步优化）。

内容的提问来源于stack exchange，提问作者Jerry