为何选取DOM元素时需将变量声明为const常量？

这个问题问得特别到位！我刚入门JavaScript的时候也琢磨过——明明DOM元素本身是可以修改内容、绑定事件的，为啥几乎所有教程和资深开发者都爱用const form = document.querySelector('form');这种写法？其实这里面藏着几个非常实用的考量，咱们掰开了说：

• const锁死的是变量的引用，不是DOM元素本身
  很多人误以为const声明的东西完全不能改，但其实它的核心是变量指向的内存地址不能被替换。也就是说，你不能把form变量改成指向另一个DOM节点或者其他类型的值，但完全可以修改这个DOM元素的属性、内容、事件监听——比如form.innerHTML = '新内容'或者form.addEventListener('click', fn)，这些操作都不受const限制。

• 避免意外覆盖，让代码更安全
  用const的最大好处是，能防止你不小心写出form = document.getElementById('other-form')这种把变量指向换掉的错误。大多数时候，我们选中一个DOM元素后，就只想操作这同一个节点，不想让变量“跑偏”——const刚好能帮我们把这个边界焊死。

• 代码意图更清晰，可读性拉满
  当其他开发者看到你用const声明DOM变量时，一眼就能get到：“哦，这个变量从始至终都指向同一个DOM节点，不会被重新赋值”。不用再花时间去排查这个变量后面会不会被改成别的东西，维护起来省心太多。

• 符合现代JS的最佳实践
  现在前端圈普遍遵循“最小权限原则”：能用const就不用let，只有当确实需要改变变量指向的时候才用let。而选取DOM元素的场景里，99%的情况都不需要切换变量的引用，所以const是最贴合场景的选择。

举个简单的对比例子：

// 用const：安全、意图明确
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
form.innerHTML = '<p>更新表单内容</p>'; // 完全没问题，只是修改元素本身

// 用let：存在意外覆盖的风险
let form = document.querySelector('form');
// 后面不小心手滑写错了...
form = 123; // 这时候再调用form.addEventListener直接报错！

当然啦，如果你的业务逻辑真的需要让这个变量指向不同的DOM元素（比如切换标签页时替换节点），那用let完全没问题——但这种情况其实非常少见。

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