一行代碼告別document.getElementById
更新時間:2012年06月01日 23:04:33 作者:
很久以前做網(wǎng)頁的時候,幾乎沒有聽說過 getElementById 這一玩意兒。在那個ie獨占天下的年代里,做的頁面也幾乎都是ie only的。只要ie沒問題,那就OK了
所以絕大多數(shù)的腳本里,都是直接通過元素的id來訪問DOM的。
后來隨著各種瀏覽器接踵而至,逐漸的替代了ie。為了保證各路門派統(tǒng)一規(guī)則,標(biāo)準(zhǔn)化越來越被重視。當(dāng)初那種直接訪問id的方法,逐漸被document.getElementById所替代。如果這年頭還在用id訪問元素,要么就是做程序里的內(nèi)嵌網(wǎng)頁,要么就是像鐵道部那樣的超境界仿古網(wǎng)站:) 當(dāng)然只要保證你的用戶都是用ie訪問,這樣的非標(biāo)準(zhǔn)也但用無妨。
然而,很多第三方瀏覽器剛出來的時候,為了保證能與當(dāng)時大量的非標(biāo)準(zhǔn)頁面兼容,都保留了用id訪問DOM這一非標(biāo)準(zhǔn)做法。事實上如今的主流瀏覽器,只有FireFox不支持這種做法,而Chrome,Opera,Safari,Mobile Safari都支持。
既然如此,我們不如讓FireFox也支持,這樣所有的瀏覽器都可以直接用id直接訪問DOM,不僅快捷方便,減少了累贅的代碼,更能提升運行的效率。
實現(xiàn)很簡單,文檔載入完成后查詢帶有id屬性的元素,然后在window對象里添加其引用:
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需要這個hack,所以我們先檢測下是否有其特征。最后精簡下代碼,利用數(shù)組遍歷回調(diào),即可壓縮到簡單的一行:
<script>
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k});
</script>
不過有個值得注意的地方,在文檔載入尚未完成前 querySelectorAll,只能查詢當(dāng)前<script>之前的元素。所以以上代碼必須放在文檔的末尾。而使用id訪問,也必須在文檔載入完成之后,否則就可能找不到這個元素。下面是個測試頁面,在所有瀏覽器下都通過:
<!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>
后來隨著各種瀏覽器接踵而至,逐漸的替代了ie。為了保證各路門派統(tǒng)一規(guī)則,標(biāo)準(zhǔn)化越來越被重視。當(dāng)初那種直接訪問id的方法,逐漸被document.getElementById所替代。如果這年頭還在用id訪問元素,要么就是做程序里的內(nèi)嵌網(wǎng)頁,要么就是像鐵道部那樣的超境界仿古網(wǎng)站:) 當(dāng)然只要保證你的用戶都是用ie訪問,這樣的非標(biāo)準(zhǔn)也但用無妨。
然而,很多第三方瀏覽器剛出來的時候,為了保證能與當(dāng)時大量的非標(biāo)準(zhǔn)頁面兼容,都保留了用id訪問DOM這一非標(biāo)準(zhǔn)做法。事實上如今的主流瀏覽器,只有FireFox不支持這種做法,而Chrome,Opera,Safari,Mobile Safari都支持。
既然如此,我們不如讓FireFox也支持,這樣所有的瀏覽器都可以直接用id直接訪問DOM,不僅快捷方便,減少了累贅的代碼,更能提升運行的效率。
實現(xiàn)很簡單,文檔載入完成后查詢帶有id屬性的元素,然后在window對象里添加其引用:
復(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需要這個hack,所以我們先檢測下是否有其特征。最后精簡下代碼,利用數(shù)組遍歷回調(diào),即可壓縮到簡單的一行:
復(fù)制代碼 代碼如下:
<script>
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k});
</script>
不過有個值得注意的地方,在文檔載入尚未完成前 querySelectorAll,只能查詢當(dāng)前<script>之前的元素。所以以上代碼必須放在文檔的末尾。而使用id訪問,也必須在文檔載入完成之后,否則就可能找不到這個元素。下面是個測試頁面,在所有瀏覽器下都通過:
復(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>
您可能感興趣的文章:
- 原生js操作checkbox用document.getElementById實現(xiàn)
- js querySelector和getElementById通過id獲取元素的區(qū)別
- getElementByIdx_x js自定義getElementById函數(shù)
- document.getElementById介紹
- document.getElementById方法在Firefox與IE中的區(qū)別
- document.getElementById為空或不是對象的解決方法
- getElementByID、createElement、appendChild幾個DHTML元素
- document.getElementById獲取控件對象為空的解決方法
相關(guān)文章
JavaScript實現(xiàn)shuffle數(shù)組洗牌操作示例
這篇文章主要介紹了JavaScript實現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12用JavaScript 判斷用戶使用的是 IE6 還是 IE7
判斷IE瀏覽器的腳本,方便根據(jù)瀏覽器不懂,支持不同的代碼的分別調(diào)用。2008-01-01js select下拉聯(lián)動 更具級聯(lián)性!
這篇文章主要為大家詳細(xì)介紹了js select下拉聯(lián)動的相關(guān)資料,更具級聯(lián)性!文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01淺談JavaScript超時調(diào)用和間歇調(diào)用
JavaScript是單線程語言,但它允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行。前者是在指定的時間過后執(zhí)行代碼,而后者則是每隔指定的時間就執(zhí)行一次代碼。2015-08-08