JS可直接通过id访问元素时getElementById的作用与差异

你发现的直接通过id名访问元素是浏览器保留的历史遗留非标准特性，和document.getElementById()的区别非常明确，后者确实是更可靠的写法，具体差异如下：

隐式id全局变量的本质 #

当HTML元素设置了id属性时，多数现代浏览器会自动把该元素的引用挂载到window对象的同名属性上，你直接写hello123能访问到元素，本质是访问window.hello123这个隐式生成的全局属性。
配套的最简可运行示例：

<p id="hello123">hello this works 123</p>
<script>
// 实际访问的是window.hello123
console.log(hello123.innerHTML);
</script>

这种写法的问题非常多：

• 命名冲突风险极高：如果全局作用域已经声明了同名变量、函数，或者存在和id重名的浏览器内置全局属性（比如name、location、top、alert这类），隐式挂载的DOM引用会被直接覆盖，你拿到的值完全不符合预期，且这类问题排查难度很高。
• 作用域限制：这种隐式属性只存在于全局作用域，如果你在函数、块级作用域内直接写同名标识符，JS引擎会优先从当前作用域链向上查找，不会自动拿到window上挂载的DOM引用，很容易触发xxx is not defined的报错。
• 行为无统一标准：这个特性不属于ECMAScript或者W3C DOM的官方规范，是早期浏览器为了降低新手开发门槛做的兼容实现，不同浏览器的行为存在差异——比如部分浏览器会把带name属性的表单元素也做同名挂载，遇到重复id时有的返回单个元素有的返回元素集合，没有统一的行为预期。
• 可读性差：读代码时无法直接区分hello123是开发者自定义的变量，还是自动挂载的DOM引用，后续维护很容易出问题。

document.getElementById()的优势 #

这是W3C DOM标准规定的官方元素查询API，相比隐式全局变量的写法可靠性高很多：

• 行为完全可控：不管全局有没有同名变量、当前在什么作用域下调用，API都会严格按照规范遍历DOM树，返回匹配对应id的元素，不存在隐式覆盖的问题。
• 兼容性一致：所有主流浏览器对这个API的实现完全统一，不存在行为差异。
• 语义清晰：代码中出现document.getElementById()时，所有开发者都能明确知道这是在查询DOM元素，代码可读性和可维护性更强。

补充：你给出的代码片段里存在两处笔误：一是直接访问的写法里把innerHTML错写为innterHTML（多了一个t）；二是getElementById的示例里字符串参数少了闭合双引号，实际编写时需要注意这类语法错误。

你之前用的document.getElementById()写法是工业界推荐的标准实践，隐式id访问的特性仅适合临时写demo测试，绝对不要在生产环境代码里使用。

内容的提问来源于stack exchange，提问作者Alexandre d'Entraigues