JavaScript入门问题：函数内外变量操作为何不更新DOM的textContent

执行后DOM不更新的原因 #

• 你给text变量存储的是值拷贝，和DOM节点无绑定
  textContent返回的是字符串，属于JavaScript的基础数据类型，基础类型赋值只会复制值本身。你执行let text = document.querySelector("#text").textContent时，只是把当前<p id="text">的文本值"Hi"复制了一份存在text变量里，这个变量和原DOM节点没有任何关联。
• 修改text变量不会触发DOM更新
  你在changeText里写text = "Goodbye"，只是修改了这个独立变量的取值，完全没有操作DOM节点，因此页面内容不会变化。但变量本身的值确实被修改了，所以console.log会打印出"Goodbye"。

为什么变量声明放在函数内就能生效 #

你提到的函数内声明可生效的写法，本质是直接操作了DOM节点，通常写法如下：

function changeText() {
  // 这里拿到的是DOM节点的引用，不是单纯的文本值
  const text = document.querySelector("#text")
  text.textContent = "Goodbye"
}

DOM节点属于引用类型，你拿到节点对象后直接修改它的textContent属性，是对DOM节点本身做修改，会触发浏览器重新渲染对应节点，所以页面内容会更新。

全局复用的正确写法参考 #

如果需要全局复用该节点，建议直接存储DOM节点引用，而非文本值：

// 全局存储DOM节点的引用
const textNode = document.querySelector("#text")

function changeText() {
  textNode.textContent = "Goodbye"
}

changeText()
console.log(textNode.textContent)

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