document.getElementById介绍


Posted in Javascript onSeptember 13, 2011

把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9:

function testFunc(){ 
alert('test') 
} 
$(function(){ 
var g = document.getElementById , 
w = window.testFunc ; 
//g 
alert(typeof(g)); 
alert(String(g)); 
alert(g instanceof Object); 
alert(g instanceof Function); 
//w 
alert(typeof(w)); 
alert(String(w)); 
alert(w instanceof Object); 
alert(w instanceof Function); 
//执行 
alert(g('t')); 
w(); 
});

在标准浏览器中(IE9、FF、chrome等)上述代码执行得非常一致,返回结果如下:
typeof => "function"
String => "function #funcName#{[native code]}" 
instanceof Object => true 
instanceof Function => true

很奇怪,虽然类型是函数,但是我们却不能直接使用括号来执行函数g,而需要使用call

g.call(document,elementId);
但是如果运行环境是IE6,一切看起来非常诡异,下面是运行结果(注意粗体部分):

//g 
typeof => "object" 
String => "function getElementById{[native code]}" 
instanceof Object => false 
instanceof Function => false 
//w 
typeof => "function" 
String => "function testFunc{alert('test')}" 
instanceof Object => true 
instanceof Function => true

在IE 6下,对于g和w都只能使用括号直接执行函数,而不需要使用call。对于函数g使用下面的方式调用会导致一个“对象没有该属性”的错误:
g.call(document,eleId)
在IE6下,对于自定义的函数testFunc测试结果没有任何问题,但是对于g却十分地诡异!

既然g是object那么为何可以像函数一样用()直接调用执行?
而在标准浏览器中,g既然是函数为什么却不能直接使用()来执行呢?
事实上对于document.getElementById,它到底是function还是object就连jQuery 1.6.2也没有解决这个问题。
在IE6中$.isFunction(g)仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相关源代码:

class2type={}; 
... 
// Populate the class2type map 
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { 
class2type[ "[object " + name + "]" ] = name.toLowerCase(); 
}); 
... 
type: function( obj ) { 
return obj == null ? 
String( obj ) : 
class2type[ Object.prototype.toString.call(obj) ] || "object"; 
}, 
... 
isFunction: function( obj ) { 
return jQuery.type(obj) === "function"; 
}

于是在StackOverflow上提了这个问题,好在牛人确实多,很快就有了回复。最后我简单的总结一下给大家参考:
document.getElementById 最初被定义为 HTMLDocument (HTML DOM)接口的一个成员,但是在后来的 2 级 DOM 中移入到 Document (XML DOM)接口中。
document.getElementById属于host object,它是一个function,但是它并没有被定义在ECMAScript中而是DOM接口的一部分。
支持[[Call]](内部属性?)host object的typeof返回值就是function。请记住Host Objects并不总是遵循Native Objects的相关规则,比如typeof。
而对于testFunc它是native object, 更具体地说是native function。
下面是EcmaScript 5对于typeof操作符的返回结果的归类:

Type of val Result
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Object (native and does not implement [[Call]]) "object"
Object (native or host and does implement [[Call]]) "function"
Object (host and does not implement [[Call]]) Implementation-defined except may not be "undefined", "boolean", "number", or "string".
所以如果要实现用$代替document.getElementById需要这么做:
var $ = function(id) { return document.getElementById(g) };

但是即使有了上面的解释之后,我对Host Object和Native Object又有了新的疑惑。
Javascript 相关文章推荐
javaScript arguments 对象使用介绍
Oct 18 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
js实现微博发布小功能
Jan 12 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
js实现无缝轮播图
Mar 09 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 #Javascript
各情景下元素宽高的获取实现代码
Sep 13 #Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
Javascript学习笔记 delete运算符
Sep 13 #Javascript
You might like
收藏的一个php小偷的核心程序
2007/04/09 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php判断当前操作系统类型
2015/10/28 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
运动会邀请函范文
2014/01/31 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
财务人员担保书
2014/05/13 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
暖春观后感
2015/06/08 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS