在JavaScript里，变量赋值的行为取决于值的类型。原始值包括字符串、数字、布尔、null、undefined、symbol和bigint，它们通过值拷贝方式赋值；而对象、数组以及DOM节点都属于引用类型，变量保存的是内存地址，赋值后多个变量会指向同一个对象。理解这一点对DOM开发非常关键。
原始值与引用值的赋值差异
当我们把原始值赋给另一个变量时，会在栈中创建一份独立副本，修改互不影响。而引用类型赋值只是复制了指针，任意变量修改对象属性都会影响其他引用。
// 原始值赋值
let a = 10;
let b = a;
b = 20;
console.log(a); // 10，a不受影响
// 引用值赋值
let obj1 = { width: 100 };
let obj2 = obj1;
obj2.width = 200;
console.log(obj1.width); // 200，原对象被修改
DOM节点的引用特性
通过document.getElementById等方法获取的DOM元素也是对象引用。把节点赋给变量后，对该变量调用属性修改会直接反映到页面真实节点上。
常见DOM属性操作方式
- 使用property赋值：直接写 element.value = 'test'，操作的是JS对象属性。
- 使用setAttribute：写 element.setAttribute('value', 'test')，操作的是HTML特性。
- 避免将DOM节点放进普通对象后浅拷贝，否则修改拷贝体也会影响原节点。
推荐实践示例
下面代码展示安全地读取并修改DOM属性，且不破坏原始引用关系：
// 获取DOM引用
let inputEl = document.getElementById('username');
// 直接修改property
inputEl.value = 'ipipp';
// 需要独立数据时使用原始值拷贝
let currentVal = inputEl.value; // 字符串为原始值，安全拷贝
currentVal = 'changed';
console.log(inputEl.value); // 仍为 ipipp
操作DOM属性的注意事项
| 场景 | 建议 |
|---|---|
| 批量修改样式 | 用element.style.setProperty或classList，减少重排 |
| 读取自定义数据 | 优先用element.dataset，而非getAttribute |
| 缓存DOM引用 | 将节点存变量，但勿对节点做浅拷贝再改属性 |
小结
清楚变量赋值是值拷贝还是引用共享，可以帮助我们在DOM开发中避开坑。对原始值放心拷贝，对DOM节点和对象谨慎对待引用，配合property与attribute的合理用法，就能写出可维护的前端逻辑。
JavaScript变量赋值DOM属性修改时间：2026-07-27 16:21:13