【广州前端】- 关于通过id名获取dom元素的问题 - 黑马程序员技术交流社区

在用js做编辑功能时候,发现一种奇怪的写法。用到了没有定义的变量来直接操作dom，查询之后

发现这个小的知识点。

标签有id这个属性，不使用getElementById方法，也可以直接用id获取dom元素。而且最让我意

这是因为，如果在HTML文档中用id属性来为元素命名，并且如果Window对象没有此名字的属性，

Window对象会赋予一个属性，它的名字就是id属性的值，而它们的值指向表示文档元素的HTMLElement

对象。

在客户端Javascript中，Window对象是以全局对象的形式存在于作用域链的最上层，这就意味着

在HTML文档中使用的id属性会成为被脚本访问的全局变量。如果文档包含一个<div id='box'>元素，

那么就可以通过全局变量box来引用此元素。

但是，有一个很重要的警告，如果Window对象已经具有此名字的属性，这就不会发生。比如，id

是“history”,“location”的元素，就不会以全局变量的的形式出现，因为这些id已经被占用了。

同样，如果HTML文档包含一个id为“x”的元素，并且在代码中声明并赋值给全局变量x，那这个变量

的存在就会阻止元素获取它的window属性，而如果脚本中的变量声明出现在命名元素之后，那么变量

的显示赋值会覆盖该属性的隐式值。

元素id作为全局变量的隐式应用是web浏览器演化过程中遗留的怪癖。它主要是出于与已有web页

面后向兼容性的考虑，但这里并不推荐使用这种做法。浏览器厂商可以在任何时候为window对象定义

新属性，而这些新属性都会破坏使用了此属性名的隐式定义的代码。

所以，希望通过id名来获取dom元素，最好还是使用document.getElementById()，这是一个

document对象的方法，可以通过它来获得指定id的html元素。

点击查看更多精彩前端资源

点击有惊喜