DOM元素ID作为JS变量使用：与getElementById的差异及浏览器兼容性

嘿，这个问题问得挺到位的——我刚入门JS那会儿，偶然发现直接写元素ID就能拿到DOM节点，当时还以为是“黑魔法”呢！咱们好好掰扯掰扯这两种方式的区别，以及兼容性的事儿：

核心差异点 #

1. 作用域与命名冲突风险 #

直接用ID作为变量时，这个变量其实是挂载在全局对象（浏览器环境下就是window）上的属性。这就意味着：

• 如果全局作用域里已经有同名变量，会直接覆盖掉ID对应的元素引用。比如你写了var username = "小明"，同时页面有个<input id="username">，那直接调用username拿到的是字符串"小明"，而非输入框元素。
• 要是元素ID和window的原生属性重名（比如alert、history、location），那直接用ID根本拿不到元素——原生属性的优先级更高。比如<div id="alert"></div>，alert还是那个弹窗函数，只有document.getElementById("alert")才能拿到这个div。

而document.getElementById(id)完全不受全局变量或原生属性的影响，只要DOM树里存在对应ID的元素，就能精准获取，语义也更清晰。

2. 动态元素的支持 #

浏览器只会在页面初始加载时，把静态HTML里的ID元素注册为window属性。如果是通过JavaScript动态创建的元素（比如document.createElement("div")后设置ID并添加到DOM），不会自动生成对应的全局变量，这时候必须用document.getElementById()才能获取到。

3. 严格模式下的表现 #

在严格模式（"use strict"）中，使用未声明的变量会直接抛出错误，但浏览器对ID全局变量的处理比较特殊——大部分浏览器允许在严格模式下直接访问这些变量，但这本质上属于隐式全局变量，不符合严格模式的规范精神，代码可读性和可维护性都会打折扣。而document.getElementById()是标准API，在严格模式下表现完全稳定。

4. 存在性检查的一致性 #

如果DOM里不存在对应ID的元素，document.getElementById(id)会返回null，这是明确且标准的返回值。而直接用ID变量的话，结果可能因浏览器或加载时机而异：页面未加载完成时可能是undefined，某些老浏览器甚至可能返回奇怪的结果，判断逻辑容易出问题。

兼容性情况 #

这种直接用ID引用元素的行为，最早是IE浏览器的非标准扩展，后来被其他主流浏览器效仿，最终HTML5规范将其正式纳入（但依然不推荐作为最佳实践）。

目前来看：

• 所有现代浏览器（Chrome、Firefox、Safari、Edge）都完全支持该特性。
• 老版本IE（IE6及以上）也支持，毕竟是它先搞出来的。

也就是说，兼容性几乎不是问题，但不代表这是值得推荐的写法——前面提到的各种坑，足以让代码埋下难以排查的隐患。

总结建议 #

如果觉得document.getElementById()写起来繁琐，可以自己封装一个极简的工具函数：

function $(id) {
  return document.getElementById(id);
}

这样用$("my-element")就能快速获取元素，既避免了全局变量的坑，又保持了代码简洁性。

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