如题

原文发表于：2014-07-14

浏览器会给页面所有取了id的元素生成一个名字就叫这个id的对象，对象的内容就是它的DOM对象，相当于是document.getElementById(id)返回的内容。

我们来看一个测试例子：

<div id="test1">第一段内容</div>
<div id="test2">第二段内容</div>
<script type="text/javascript">
console.log(test1==undefined, test1); // 输出：false， div#test1

// 测试一
(function()
{
    var test1 = test1 || '你好啊';
    console.log(test1); // 输出 '你好啊'
})();

// 测试二
(function()
{
    test2 = test2 || '你好啊';
    console.log(test2); // 输出 div#test2
})();
</script>

上面的例子中，测试一由于使用了var，并且由于js存在变量声明提升，所以会输出后面的内容，测试二其实等同于下面的代码：

(function()
{
    var test1; // 由于重新定义了test1，这里相当于给它赋值了undefined
    test1 = test1 || '你好啊';
    console.log(test1); // 输出 '你好啊'
})();

以上代码在Chrome、Firefox和IE上测试都存在类似问题。

结论

所以，类似下面这样的代码就尽量不要写了：

var test = document.getElementById('test'); // 此代码多此一举

另外，js在定义变量的时候也要尽量不要和已存在的DOM的id重复了，避免带来不必要的麻烦。