js可不使用document直接根据id获取id元素

今天在用原生js写demo的时候发现一个有意思的小现象，那就是可以直接根据元素的id去获取对应的元素。

起先是我定义了四个btn，每个btn都是根据getElementById来获取元素，然后给元素绑定事件，在调试的时候都挺好，到了后面我打算优化流程去掉一个btn的时候我才发现第四个btn一直没有定义

  <div>
      <button id="btn1">test1</button>
      <button id="btn2">test2</button>
      <button id="btn3">test3</button>
      <button id="btn4">test4</button>
  </div>
 <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
  
    // 绑定事件
    const bindEvent = () => {
      console.log(btn5);
      btn1.addEventListener('click', a, false);
      btn2.addEventListener('click', b, false);
      btn3.addEventListener('click', c, false);
      btn4.addEventListener('click', d, false);
    };

    (() => {
      bindEvent();
    })();
  </script>

简化的代码如上所示，起先我以为是代码又缓存，因为我用了express，但是我重启清除缓存以后，btn4依然可以使用，于是我就写了个简单的demo，不用express访问来测试一下。

此时我猜测可能是浏览器的优化，因为id是唯一的，所以可能浏览器读取到这个id元素的时候就自动定义了一个id同名变量。所以我猜测类名应该是不可以的，而如果在js中定义了同名的变量或常量，之前浏览器默认定义的id同名变量则会被覆盖。

<body>
  <div id="app"></div>
  <div id="test"></div>
  <div class="aaa"></div>
</body>
<script>
  const test = 123;

  console.log(app); // <div id="app"></div>
  console.log(test); // 123
  console.log(aaa); // Uncaught ReferenceError: aaa is not defined
</script>