为何未声明的HTML ID变量可直接在JavaScript中使用？

嘿，这个发现挺有意思的！其实这不是ES6的新增特性，而是浏览器很早就存在的一个非标准但被广泛支持的历史遗留行为——全局自动绑定ID元素。

背后的原理 #

浏览器在加载页面时，会自动把所有带有id属性的DOM元素挂载到全局的window对象上，变量名就是元素ID的字符串值。比如你页面里有个<nav id="mainNav">，那浏览器就会自动创建window.mainNav，直接指向这个导航栏元素。你不用手动调用document.getElementById('mainNav')，直接写mainNav就能访问它（因为全局变量默认都是window的属性）。

你遇到的情况里，nav能和mainNav指向同一节点，大概率是因为你的导航栏元素ID其实是nav，而你之前用document.getElementById('mainNav')可能是笔误？不过核心逻辑都是一样的——浏览器自动帮你把ID映射成了全局变量。

为什么不推荐依赖这个特性？ #

虽然主流浏览器都支持，但它真的不适合在生产代码里用：

• 非标准行为：它不属于ECMAScript的标准规范，只是浏览器厂商的实现，理论上存在被修改或移除的风险（虽然可能性极低，但规范层面不保障）。
• 命名冲突风险：如果你的代码里声明了和元素ID同名的全局变量，会直接覆盖浏览器自动绑定的元素引用，反之亦然，很容易引发莫名其妙的bug。比如你写了var nav = '导航标题'，那原本指向DOM元素的nav就变成字符串了，后续操作DOM肯定报错。
• 代码可读性差：其他开发者看你的代码时，会一脸疑惑“nav这个变量从哪冒出来的？”，不如显式调用document.getElementById()或querySelector()清晰直观。

更稳妥的写法 #

还是推荐显式获取DOM元素，比如：

// 用getElementById
const mainNav = document.getElementById('mainNav');
// 或者更灵活的querySelector
const mainNav = document.querySelector('#mainNav');

这样代码更规范，可读性更强，也能避免潜在的坑。

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