各浏览器对document.getElementById等方法的实现差异解析


Posted in Javascript onDecember 05, 2013

所有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 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 #Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 #Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 #Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 #Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 #Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 #Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 #Javascript
You might like
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php使用正则验证中文
2016/04/06 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
学期自我评价
2014/01/27 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Python+tkinter实现高清图片保存
2022/03/13 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js