document.getElementById介绍

更新时间：2011年09月13日 23:27:32 作者：

经常使用document.getElementById，但对于更详细的细节可以参考下。

把你的大脑当做浏览器执行下面的代码两次，分别是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又有了新的疑惑。

您可能感兴趣的文章:

getElementById

更优雅的微信小程序骨架屏实现详解
这篇文章主要介绍了更优雅的微信小程序骨架屏实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
JavaScript实现重置表单（reset）的方法
这篇文章主要介绍了JavaScript实现重置表单（reset）的方法,涉及javascript中reset()方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
JavaScript Date对象详解及时间戳和时间的相互转换问题
这篇文章主要介绍了JavaScript Date对象详解及时间戳和时间的相互转换问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
小程序中监听页面滚动的几种方法实例
这段时间接了一个微信小程序项目,从此打开小程序的新世界大门,下面这篇文章主要给大家介绍了关于小程序中监听页面滚动的几种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
js实现图片缓慢放大缩小效果
这篇文章主要为大家详细介绍了js实现图片缓慢放大缩小效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JavaScript 生成唯一ID的几种方式
这篇文章主要介绍了JavaScript 生成唯一ID的几种方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2021-02-02
微信小程序实战之上拉(分页加载)效果(2)
这篇文章主要介绍了微信小程序实战之上拉加载、分页加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
javascript代码混淆与加解密方式
这篇文章主要介绍了javascript代码混淆与加解密方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
json对象和formData相互转换的方式详解
我们有两种常见的传参方式： JSON 对象格式和 formData 格式，但是一些场景是需要我们对这两种数据格式进行转换的，这篇文章主要介绍了json对象和formData相互转换的方式详解,需要的朋友可以参考下
2023-02-02
微信小程序扭蛋抽奖机css3动画实现详解
这篇文章主要介绍了微信小程序扭蛋抽奖机css3动画实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07