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

发现这个小的知识点。

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

外的是浏览器支持程度，Firefox、chrome支持不意外，意外的是IE居然7-11都支持 。

    这是因为，如果在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元素。

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

点击有惊喜

  

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

发现这个小的知识点。

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

外的是浏览器支持程度，Firefox、chrome支持不意外，意外的是IE居然7-11都支持 。

    这是因为，如果在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元素。

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

点击有惊喜