javascript - 为什么给html标签定义了id，就可以在js中（浏览器环境）直接通过id引用这个dom元素？

Question

当你在html中给某个标签定义了id, 在window环境中就可以直接通过id的值引用这个DOM元素。

举个列子:

<p id="demo"></p>

如果你还没有用demo当作占位符，那么你的window.demo就引用了这个p,可以在控制台中这样测试：

demo.appendChild(document.createTextNode('hello'));

我很好奇里面的关系，有人可以讲讲吗

Answer 1

当一个元素加上ID时，ID的值就成了window对象的属性名称

<p id='foo'></p>

此时就生成了一个window.foo全局变量，你可以给它赋值等操作，比如：

foo=111;
console.log(foo);

但是，不要使用这种写法，兼容性极差，而且容易污染全局，造成各种冲突和错误