各瀏覽器對document.getElementById等方法的實現(xiàn)差異解析

更新時間：2013年12月05日 09:36:11 作者：

這篇文章主要是對各瀏覽器對document.getElementById等方法的實現(xiàn)差異進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助

所有Web前端同仁對 document.getElementById 都非常熟悉了。開發(fā)過程中經(jīng)常需要用其獲取頁面id為xx的元素，自從元老級JS庫Prototype流行后，都喜歡這么簡寫它

// 方式1 
function $(id){ return document.getElementById(id); } 

有沒有人想過為什么要這么寫，而不用下面的方式寫呢？

復制代碼代碼如下:

// 方式2 
var $ = document.getElementById; 

這么寫的$更簡潔啊，也很明了，將document的方法getElementById賦值給變量$，用$去獲取頁面id為xx的元素。實際上方式2在IE6/7/8中是可行的（IE9中有些變動），F(xiàn)irefox/Safari/Chrome/Opera則行不通。還請自行測試。

為什么Firefox/Safari/Chrome/Opera 方式2獲取就不行呢，原因是這些瀏覽器中getElementById方法內部實現(xiàn)中需依賴this(document)，IE則不需要this?；蛘哒f方式2在Firefox/Safari/Chrome/Opera中調用時說丟失了this，以下是個簡單示例

復制代碼代碼如下:

// 定義一個函數(shù)show 
function show(){alert(this.name);} 

// 定義一個p對象，有name屬性 
var p = {name:'Jack'}; 

show.call(p); // -> 'Jack' 
show(); // -> '' 
show.call(null); // -> ''<BR> 

可以看到show的實現(xiàn)中依賴this（簡單說方法體中使用了this），因此調用時的環(huán)境（執(zhí)行上下文）如果沒有name屬性，則得不到期望的結果。
換句話說，IE6/7/8實現(xiàn)document.getElementById時沒有用到this，而 IE9/Firefox/Safari/Chrome/Opera 需要用到this，這里的this正是document對象。直接調用方式2時內部的 this卻是window對象，所以造成方式2在 Firefox/Safari/Chrome/Opera 不能根據(jù)id來正常獲取元素。

如果將document.getElementById的執(zhí)行環(huán)境換成了document而非window，則可以正常的使用$了。如下

復制代碼代碼如下:

// 修復document.getElementById 
document.getElementById = (function(fn){ 
    return function(){  
        return fn.apply(document,arguments); 
    }; 
})(document.getElementById); 

// 修復后賦值給$，$可正常使用了 
var $ = document.getElementById; 

再次，ECMAScript5 中為function新增的 bind 方法可以實現(xiàn)同樣的效果

復制代碼代碼如下:

// 方式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可運行，其它瀏覽器報錯 

您可能感興趣的文章:

document.getElementById

JavaScript實現(xiàn)俄羅斯方塊游戲過程分析及源碼分享
這篇文章主要介紹了JavaScript實現(xiàn)俄羅斯方塊游戲過程分析及源碼分享,本文分解了游戲規(guī)則、實現(xiàn)過程、難點分析及實現(xiàn)源碼,需要的朋友可以參考下
2015-03-03
JavaScript包裝對象使用介紹
這篇文章主要介紹了JavaScript中包裝對象的一些知識點，包括內置對象等
2013-08-08
uniapp中的picker選擇器的幾種使用場景
本文主要介紹了uniapp中的picker選擇器的幾種使用場景，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
最精簡的JavaScript實現(xiàn)鼠標拖動效果的方法
這篇文章主要介紹了最精簡的JavaScript實現(xiàn)鼠標拖動效果的方法,可實現(xiàn)javascript控制鼠標拖動div層效果的方法,需要的朋友可以參考下
2015-05-05
JavaScript?中傳遞參數(shù)的方式示例詳解
JavaScript中參數(shù)傳遞方式包括按值傳遞、按引用傳遞、參數(shù)解構傳遞、Rest參數(shù)傳遞、回調函數(shù)傳遞、閉包傳遞、模板字符串傳遞和高階函數(shù)傳遞,每種方式都有其特點和適用場景,選擇合適的傳遞方式可以提高代碼的可讀性、可維護性和靈活性,感興趣的朋友一起看看吧
2025-01-01
Javascript技術技巧大全（五）
Javascript技術技巧大全（五）...
2007-01-01
JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性
這篇文章主要介紹了JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
微信小程序實現(xiàn)星星評價效果
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星星評價效果，支持多個條目評價，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
微信小程序實現(xiàn)簡單彈框效果
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解小程序云開發(fā)數(shù)據(jù)庫
這篇文章主要介紹了小程序云開發(fā)數(shù)據(jù)庫，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05