浏览器会自动给页面所有取了ID的元素生成一个对应的变量
本文由 liuxianan 发表于 2016-08-02 浏览(345) 下载md
最后修改 2016-08-02 标签:javascript 自动 生成 dom id 变量

如题

原文发表于: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重复了,避免带来不必要的麻烦。