例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="testId" class="testClass">凯小默测试页面</div> <script> console.log('1111', testId); console.log('2222', testClass); </script> </body> </html>
结果
id能直接打印出来dom，class的不行（谷歌浏览器打开）
谷歌
firefox
ie7-ie8
ie9-ie11
原因
如果dom元素的id名称不和js内置对象属性或全局变量重名的话，该名称能从window原型链上进行查找的属性，Firefox、Chrome、IE 9-11都支持，没有形成标准，而且容易污染全局，造成各种冲突和错误，不推荐使用。
我们看一个有趣的东西
Object.getOwnPropertyDescriptor()
方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
1、testId显然不是window自有属性对应
Object.getOwnPropertyDescriptor(window, 'testId') // ---> undefined
2、在原型链上，window.__proto__.__proto__上面找到了testId
Object.getOwnPropertyDescriptor(window.__proto__.__proto__, 'testId')
