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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php创建无限级树型菜单
2015/11/05 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
js实现简单的秒表
2020/01/16 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
工程业务员工作职责
2013/12/07 职场文书
竞选班长演讲稿
2013/12/30 职场文书
酒店端午节促销方案
2014/02/18 职场文书
合作协议书范本
2014/04/17 职场文书
环保建议书100字
2014/05/14 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
人民调解协议书
2016/03/21 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
php引用传递
2021/04/01 PHP