为何带id的HTML元素会以id为名暴露至全局作用域？

你遇到的这个情况，是浏览器为兼容早期网页而保留的历史特性：

核心原因 #

早期浏览器为了简化开发者获取DOM元素的流程，引入了一个非标准特性（后来被纳入HTML规范的Annex B，也就是「非规范但广泛实现的兼容特性」章节）：当页面中存在带有id属性的元素时，浏览器会自动在全局window对象上创建一个与id同名的属性，直接指向该DOM元素。

补充细节 #

• 这个特性有优先级：如果开发者手动在全局作用域声明了同名变量，会覆盖浏览器自动生成的属性。
• Chrome、Edge、Safari这类现代浏览器都实现了这个兼容逻辑。

注意事项 #

虽然这个特性能用，但强烈不推荐在项目中依赖它：

• 它属于历史兼容特性，并非标准核心内容，存在未来行为变动的风险。
• 很容易引发变量名冲突，比如不小心定义了和元素id同名的全局变量，会导致意外覆盖，增加调试难度。

标准替代方案 #

获取DOM元素的标准、可靠方式是使用：

// 方式1：通过id精准获取
document.getElementById('myDrawing')
// 方式2：通过CSS选择器获取
document.querySelector('#myDrawing')

你的测试代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <svg
      id="myDrawing"
      class="animated v1"
      width="200"
      height="200"
      viewBox="0 0 200 200"
      style="border: 1px solid #000"
    >
      <circle
        class="eye"
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
      <circle
        class="eye"
        cx="150"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
      <rect
        class="mouth"
        x="50"
        y="150"
        width="100"
        height="20"
        fill="red"
      />
      <rect
        class="mouth smile"
        x="30"
        y="130"
        width="20"
        height="20"
        fill="red"
      />
      <rect
        class="mouth smile"
        x="150"
        y="130"
        width="20"
        height="20"
        fill="red"
      />
    </svg>
    <script>
      console.log(myDrawing);
    </script>
  </body>
</html>

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