VanillaJS中直接通过ID变量获取DOM元素的特性始于何时？

这是浏览器的历史遗留自动绑定特性：浏览器会自动将页面中带有id属性的DOM元素挂载到全局window对象上，变量名就是元素的id值。所以你直接写myInput，本质上是在访问window.myInput，它和document.getElementById('myInput')获取到的是同一个元素。

代码等价验证 #

// 以下三种写法效果完全相同
myInput.value = 'hello world';
window.myInput.value = 'hello world';
document.getElementById('myInput').value = 'hello world';

对应的HTML结构：

<input type="text" id="myInput">

重要提醒 #

• 这个特性属于非标准的历史遗留行为，虽然主流浏览器都兼容，但不推荐在生产代码中使用。如果全局作用域中存在同名变量，会直接覆盖自动绑定的元素引用，引发难以排查的bug。
• 专业开发的最佳实践是使用document.getElementById()、document.querySelector()这类标准API来获取DOM元素，代码逻辑更清晰，也能避免全局变量冲突问题。

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