id 属性自动创建 js 全局变量

给一个元素设置 id 属性，它会在 js 中创建全局变量，如

<div class="test" @click="test" id="idTest">test</div>

test() {
  console.log('idTest:', window.idTest)
}

.test {
  height: 50px;
  width: 200px;
  background-color: aliceblue;
}

点击 test

即 window.idTest = document.getElementById("idTest")

HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

• 如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
• 如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个

意思就是上面这些标签设置name 时也会在 window 对象上创建变量，但我试 a 标签不会，其它标签会，但是这种会覆盖全局变量，还会可能导致全局变量命名冲突，占用内存等问题，所以慎用啊。