无需使用document.getElementById()，直接通过ID名操作DOM元素是否可行？

Great questions! Let's break down what's happening here and why the standard approach is preferred:

问题1：能否不使用document.getElementById()，仅通过元素的ID名来选择元素？ #

答案是可以，但这种方式存在明显的风险和局限性。

现代浏览器有一个非标准的扩展行为：会自动将页面中带有id属性的DOM元素挂载到全局window对象上，作为其属性。也就是说，如果你有一个元素<h1 id="title">Title</h1>，那么window.title就指向这个DOM节点，所以你可以直接用title来访问它。

问题2：直接执行title.innerHTML = "Hello world!"是否可行？为何资料都推荐第一种方法？ #

1. 这种方法确实可行，但不推荐 #

在当前主流浏览器中，这段代码能正常工作，因为浏览器帮你把title映射到了对应的DOM元素。但这绝不是最佳实践，原因如下：

• 全局命名冲突风险极高
  如果你的元素ID和全局API、已定义的全局变量重名（比如alert、prompt、console甚至window），会直接覆盖原生对象或变量，导致难以排查的bug。比如：

  <div id="alert">Test</div>
  <script>
    alert("Hi"); // 这里不会弹出提示框，而是尝试访问div元素的alert方法，直接报错
  </script>
  

• 不属于标准规范，存在兼容性隐患
  这种自动挂载的行为是浏览器厂商的自发实现，并非ECMAScript或DOM标准的强制要求。虽然目前主流浏览器都支持，但不能保证未来所有浏览器版本都会保留这个特性，也可能存在一些老旧浏览器不支持的情况。

• 代码可读性与可维护性差
  直接使用ID名访问元素，对于其他开发者（甚至一段时间后的你自己）来说，会疑惑这个变量的来源——它既不是声明的变量，也不是函数参数，隐式的全局引用会让代码逻辑变得模糊。而document.getElementById()则清晰表明了这是在获取一个DOM元素。

• 局部作用域的干扰
  如果在局部作用域中存在同名变量，会直接覆盖全局的元素引用。比如：

  function updateTitle() {
    const title = "My Local Title";
    title.innerHTML = "Hello"; // 报错，因为title现在是字符串，不是DOM元素
  }
  

更优的替代方案 #

如果你想兼顾简洁性和安全性，可以使用document.querySelector('#title')——它支持CSS选择器语法，可读性强，且属于标准DOM API，不存在上述风险。虽然性能略低于getElementById()，但在绝大多数场景下可以忽略不计。

内容的提问来源于stack exchange，提问作者K. Jadon