快捷導(dǎo)航

一行代碼告別document.getElementById

更新時(shí)間：2012年06月01日 23:04:33 作者：

很久以前做網(wǎng)頁(yè)的時(shí)候，幾乎沒(méi)有聽(tīng)說(shuō)過(guò) getElementById 這一玩意兒。在那個(gè)ie獨(dú)占天下的年代里，做的頁(yè)面也幾乎都是ie only的。只要ie沒(méi)問(wèn)題，那就OK了

所以絕大多數(shù)的腳本里，都是直接通過(guò)元素的id來(lái)訪問(wèn)DOM的。
　　
　　后來(lái)隨著各種瀏覽器接踵而至，逐漸的替代了ie。為了保證各路門(mén)派統(tǒng)一規(guī)則，標(biāo)準(zhǔn)化越來(lái)越被重視。當(dāng)初那種直接訪問(wèn)id的方法，逐漸被document.getElementById所替代。如果這年頭還在用id訪問(wèn)元素，要么就是做程序里的內(nèi)嵌網(wǎng)頁(yè)，要么就是像鐵道部那樣的超境界仿古網(wǎng)站：）當(dāng)然只要保證你的用戶都是用ie訪問(wèn)，這樣的非標(biāo)準(zhǔn)也但用無(wú)妨。
　　
　　然而，很多第三方瀏覽器剛出來(lái)的時(shí)候，為了保證能與當(dāng)時(shí)大量的非標(biāo)準(zhǔn)頁(yè)面兼容，都保留了用id訪問(wèn)DOM這一非標(biāo)準(zhǔn)做法。事實(shí)上如今的主流瀏覽器，只有FireFox不支持這種做法，而Chrome,Opera,Safari,Mobile Safari都支持。
　　
　　既然如此，我們不如讓FireFox也支持，這樣所有的瀏覽器都可以直接用id直接訪問(wèn)DOM，不僅快捷方便，減少了累贅的代碼，更能提升運(yùn)行的效率。
　　
　　實(shí)現(xiàn)很簡(jiǎn)單，文檔載入完成后查詢帶有id屬性的元素，然后在window對(duì)象里添加其引用：

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

 
var list = document.querySelectorAll('[id]'); 
for(var i = 0; i < list.length; i++) 
{ 
if(list[i].id) 
window[list[i].id] = list[i]; 
} 

當(dāng)然，只有FF需要這個(gè)hack，所以我們先檢測(cè)下是否有其特征。最后精簡(jiǎn)下代碼，利用數(shù)組遍歷回調(diào)，即可壓縮到簡(jiǎn)單的一行：

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

 
<script> 
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k}); 
</script> 

　　不過(guò)有個(gè)值得注意的地方，在文檔載入尚未完成前 querySelectorAll，只能查詢當(dāng)前<script>之前的元素。所以以上代碼必須放在文檔的末尾。而使用id訪問(wèn)，也必須在文檔載入完成之后，否則就可能找不到這個(gè)元素。下面是個(gè)測(cè)試頁(yè)面，在所有瀏覽器下都通過(guò)：

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

 
<!DOCTYPE html> 
<html> 
<head> 
<title>No document.getElementById</title> 
</head> 
<body> 
<div id="mytag"></div> 
<script> 
onload = function() 
{ 
mytag.innerHTML = "Goodbye, document.getElementById!"; 
} 
</script> 
<script> 
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){self[e.id]=e}); 
</script> 
</body> 
</html> 