快捷導(dǎo)航

document.getElementById介紹

更新時(shí)間：2011年09月13日 23:27:32 作者：

經(jīng)常使用document.getElementById，但對(duì)于更詳細(xì)的細(xì)節(jié)可以參考下。

把你的大腦當(dāng)做瀏覽器執(zhí)行下面的代碼兩次，分別是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); 
//執(zhí)行 
alert(g('t')); 
w(); 
}); 

在標(biāo)準(zhǔn)瀏覽器中（IE9、FF、chrome等）上述代碼執(zhí)行得非常一致，返回結(jié)果如下：
typeof => "function"

復(fù)制代碼代碼如下:

 
String => "function #funcName#{[native code]}" 
instanceof Object => true 
instanceof Function => true 

很奇怪，雖然類型是函數(shù)，但是我們卻不能直接使用括號(hào)來(lái)執(zhí)行函數(shù)g，而需要使用call

g.call(document,elementId);
但是如果運(yùn)行環(huán)境是IE6，一切看起來(lái)非常詭異，下面是運(yùn)行結(jié)果（注意粗體部分）：

復(fù)制代碼代碼如下:

 
//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下，對(duì)于g和w都只能使用括號(hào)直接執(zhí)行函數(shù)，而不需要使用call。對(duì)于函數(shù)g使用下面的方式調(diào)用會(huì)導(dǎo)致一個(gè)“對(duì)象沒(méi)有該屬性”的錯(cuò)誤：
g.call(document,eleId)
在IE6下，對(duì)于自定義的函數(shù)testFunc測(cè)試結(jié)果沒(méi)有任何問(wèn)題，但是對(duì)于g卻十分地詭異！

既然g是object那么為何可以像函數(shù)一樣用()直接調(diào)用執(zhí)行？
而在標(biāo)準(zhǔn)瀏覽器中，g既然是函數(shù)為什么卻不能直接使用()來(lái)執(zhí)行呢？
事實(shí)上對(duì)于document.getElementById，它到底是function還是object就連jQuery 1.6.2也沒(méi)有解決這個(gè)問(wèn)題。
在IE6中$.isFunction(g)仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相關(guān)源代碼：

復(fù)制代碼代碼如下:

 
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上提了這個(gè)問(wèn)題，好在牛人確實(shí)多，很快就有了回復(fù)。最后我簡(jiǎn)單的總結(jié)一下給大家參考：
document.getElementById 最初被定義為 HTMLDocument (HTML DOM)接口的一個(gè)成員，但是在后來(lái)的 2 級(jí) DOM 中移入到 Document (XML DOM)接口中。
document.getElementById屬于host object，它是一個(gè)function，但是它并沒(méi)有被定義在ECMAScript中而是DOM接口的一部分。
支持[[Call]]（內(nèi)部屬性？）host object的typeof返回值就是function。請(qǐng)記住Host Objects并不總是遵循Native Objects的相關(guān)規(guī)則，比如typeof。
而對(duì)于testFunc它是native object, 更具體地說(shuō)是native function。
下面是EcmaScript 5對(duì)于typeof操作符的返回結(jié)果的歸類：

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".`