各浏览器对document.getElementById等方法的实现差异解析
更新时间：2013年12月05日 09:36:11 作者：
这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
所有Web前端同仁对 document.getElementById 都非常熟悉了。开发过程中经常需要用其获取页面id为xx的元素，自从元老级JS库Prototype流行后，都喜欢这么简写它
复制代码 代码如下:
// 方式1
function $(id){ return document.getElementById(id); }
有没有人想过为什么要这么写，而不用下面的方式写呢？
复制代码 代码如下:
// 方式2
var $ = document.getElementById;
这么写的$更简洁啊，也很明了，将document的方法getElementById赋值给变量$，用$去获取页面id为xx的元素。实际上方式2在IE6/7/8中是可行的（IE9中有些变动），Firefox/Safari/Chrome/Opera则行不通。还请自行测试。
为什么Firefox/Safari/Chrome/Opera 方式2获取就不行呢，原因是这些浏览器中getElementById方法内部实现中需依赖this(document)，IE则不需要this。或者说方式2在Firefox/Safari/Chrome/Opera中调用时说丢失了this，以下是个简单示例
复制代码 代码如下:
// 定义一个函数show
function show(){alert(this.name);}
// 定义一个p对象，有name属性
var p = {name:'Jack'};
show.call(p); // -> 'Jack'
show(); // -> ''
show.call(null); // -> ''<BR>
可以看到show的实现中依赖this（简单说方法体中使用了this），因此调用时的环境（执行上下文）如果没有name属性，则得不到期望的结果。
换句话说，IE6/7/8实现document.getElementById时没有用到this，而 IE9/Firefox/Safari/Chrome/Opera 需要用到this，这里的this正是document对象。直接调用方式2时内部的 this却是window对象，所以造成方式2在 Firefox/Safari/Chrome/Opera 不能根据id来正常获取元素。
如果将document.getElementById的 执行环境换成了document而非window，则可以正常的使用$了。如下
复制代码 代码如下:
// 修复document.getElementById
document.getElementById = (function(fn){
return function(){
return fn.apply(document,arguments);
};
})(document.getElementById);
// 修复后赋值给$，$可正常使用了
var $ = document.getElementById;
再次，ECMAScript5 中为function新增的 bind 方法可以实现同样的效果
复制代码 代码如下:
// 方式3
var $ = document.getElementById.bind(document);
但目前方式3只有IE9/Firefox/Chrome/支持。
分析了getElementById的情况，下面的一些方法在各浏览器中的差异原因就很好明白了
复制代码 代码如下:
var prinf = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8可运行，其它浏览器报错
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8可运行，其它浏览器报错
var reload = location.reload;
reload(); // IE6/7/8可运行，其它浏览器报错
var go = history.go;
go(-2); // IE6/7/8可运行，其它浏览器报错
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript实现俄罗斯方块游戏过程分析及源码分享,本文分解了游戏规则、实现过程、难点分析及实现源码,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript中包装对象的一些知识点，包括内置对象等2013-08-08
本文主要介绍了uniapp中的picker选择器的几种使用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了最精简的JavaScript实现鼠标拖动效果的方法,可实现javascript控制鼠标拖动div层效果的方法,需要的朋友可以参考下2015-05-05
JavaScript中参数传递方式包括按值传递、按引用传递、参数解构传递、Rest参数传递、回调函数传递、闭包传递、模板字符串传递和高阶函数传递,每种方式都有其特点和适用场景,选择合适的传递方式可以提高代码的可读性、可维护性和灵活性,感兴趣的朋友一起看看吧2025-01-01
Javascript技术技巧大全（五）...2007-01-01
JS removeAttribute()方法实现删除元素的某个属性
这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果，支持多个条目评价，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了微信小程序实现简单弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了小程序云开发数据库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论