JavaScript 中操作 DOM 元素属性时，直接赋值布尔值（如 elem.checked = true）会更新真实 DOM 状态；而将属性值（如 elem.checked）存为变量后再修改，仅改变局部变量，不影响 DOM，这是由原始类型按值传递、对象按引用传递的底层机制决定的。
javascript 中操作 dom 元素属性时，直接赋值布尔值（如 `elem.checked = true`）会更新真实 dom 状态；而将属性值（如 `elem.checked`）存为变量后再修改，仅改变局部变量，不影响 dom，这是由原始类型按值传递、对象按引用传递的底层机制决定的。
在 JavaScript 中，理解“值传递”与“引用传递”的区别，是正确操作 DOM 的关键。以复选框（）为例：
<input type="checkbox" id="vehicle1">
❌ 错误写法：存储的是值，不是引用
var checkbox = document.getElementById('vehicle1').checked; // → 获取的是布尔值 true/false（原始类型）
checkbox = true; // 仅修改了变量 checkbox，对 DOM 无任何影响这里 document.getElementById('vehicle1').checked 返回的是一个原始值（boolean），它被立即复制并赋给变量 checkbox。后续对 checkbox 的赋值，只是改变了这个独立的局部变量，与 DOM 元素完全解耦。
✅ 正确写法：存储的是 DOM 元素引用
var checkboxEl = document.getElementById('vehicle1'); // → 获取的是 Element 对象（引用类型）
checkboxEl.checked = true; // 直接修改该对象的属性，实时反映在 DOM 上document.getElementById() 返回的是一个 DOM 元素对象（Object），属于引用类型。变量 checkboxEl 存储的是对该对象的内存引用，因此通过 checkboxEl.checked = ... 修改其属性，等同于直接操作原始 DOM 节点。
? 衍生问题：能否直接保存 checked 属性的“引用”？
不能。
element.checked 是一个访问器属性（getter/setter），而非独立可引用的实体。JavaScript 不支持对属性本身创建引用（如 &elem.checked 类似 C++ 的取址），也无法用变量“绑定”到该属性的 setter 行为上。以下写法均无效：
立即学习“前端免费学习笔记（深入）”；
// ❌ 语法错误：无法对属性表达式取引用
var refToChecked = &document.getElementById('vehicle1').checked;
// ❌ 无效：只是再次读取值
var checkedValue = document.getElementById('vehicle1').checked;
checkedValue = true; // 无 DOM 效果
// ✅ 唯一可靠方式：始终持有元素引用，再操作其属性
const el = document.getElementById('vehicle1');
el.checked = true; // ✅ 安全、明确、可维护? 最佳实践建议
- ✅ 始终优先缓存 DOM 元素本身（const el = document.getElementById(...)），而非其属性值；
- ✅ 多次操作同一元素时，复用该引用，提升性能并避免重复查询；
- ⚠️ 注意：checked、value、textContent 等是可读写属性，但它们的值（尤其是原始类型）不可被“间接引用”——必须通过宿主对象访问；
- ? 深入理解：JavaScript 中 number、string、boolean、null、undefined、symbol 为值类型（passed by value）；而 Object（含 Element、Array、Function）为引用类型（passed by reference）。
掌握这一区分，不仅能解决 checkbox 控制问题，更是编写健壮、可预测 DOM 操作代码的基础。
