声明赋值变量后如何修改DOM元素的textContent？赋值未生效的原因及解决方法

嘿，我来帮你搞清楚这个问题！

你遇到的核心问题是：你没有操作DOM元素本身，只是操作了它的文本内容的副本。

当你执行代码：

let scoreDisplay = document.querySelector('.score').textContent

的时候，document.querySelector('.score')会找到对应的DOM元素，但你紧接着访问了它的.textContent属性——这个属性返回的是一个字符串值，也就是元素当前显示的文本内容。你把这个字符串赋值给了scoreDisplay变量，这时候scoreDisplay就只是一个普通的字符串变量，和原来的DOM元素没有任何绑定关系了。

打个比方：这就像你把教室黑板上的分数抄到自己的笔记本上，之后你修改笔记本上的数字，黑板上的分数肯定不会跟着变，因为两者是完全独立的东西。你在控制台修改scoreDisplay，只是改了这个字符串变量的值，DOM元素根本不知道这件事，所以页面自然不会更新。

要让页面同步更新，你需要直接操作DOM元素对象本身，而不是它的文本副本。这里有两种常用的方式：

方式一：先保存DOM元素引用，再修改textContent #

这是最直接的做法：

// 先获取DOM元素本身，把它存在变量里
let scoreElement = document.querySelector('.score')
// 直接修改这个元素的textContent属性
scoreElement.textContent = "twenty five"

这样你就是直接对着“黑板”修改内容，页面会立刻同步更新。

方式二：先读取文本处理，再赋值回DOM元素 #

如果需要先读取现有文本做一些处理（比如计算分数），再更新页面，可以这样做：

// 先获取DOM元素
let scoreElement = document.querySelector('.score')
// 读取当前文本内容
let currentScoreText = scoreElement.textContent
// 做处理（比如转成数字加10）
let newScore = parseInt(currentScoreText) + 10
// 把处理后的结果赋值回元素的textContent
scoreElement.textContent = newScore.toString()

简单来说，关键就是：要操作DOM元素对象，而不是它的textContent返回的字符串副本。

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