为何两段修改BODY背景色的JavaScript代码效果不同？

第一段代码的问题 #

let x = document.getElementsByTagName("BODY")[0].style.backgroundColor

function change() { x = "red"; }

这里的x存储的是body元素当前backgroundColor的属性值（初始状态下这个值是空字符串），它只是一个普通的字符串变量，和DOM元素本身没有任何关联。当你在change函数里给x赋值"red"时，只是修改了这个变量的内容，根本没触碰到DOM元素的样式属性，自然不会改变页面背景色。

第二段代码的逻辑 #

let x = document.getElementsByTagName("BODY")[0]

function change() { x.style.backgroundColor = "red"; }

这里的x存储的是body元素的DOM对象引用，它直接指向页面中的body元素。当你在change函数里通过x.style.backgroundColor = "red"操作时，是直接修改了这个DOM对象的样式属性，浏览器会根据这个修改更新页面渲染，所以背景色会变成红色。

本质区别就是：第一段拿了属性的值存起来修改，第二段拿了元素本身的引用去修改属性。

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