首頁 > web前端 > js教程 > 一行程式碼告別document.getElementById_javascript技巧

一行程式碼告別document.getElementById_javascript技巧

WBOY
發布: 2016-05-16 17:52:51
原創
1419 人瀏覽過

所以絕大多數的腳本裡,都是直接透過元素的id來存取DOM的。
  
  後來隨著各種瀏覽器接踵而至,逐漸的替代了ie。為了確保各路門派統一規則,標準化越來越被重視。當初那種直接存取id的方法,逐漸被document.getElementById所取代。如果這年頭還在用id訪問元素,要么就是做程序裡的內嵌網頁,要么就是像鐵道部那樣的超境界仿古網站:) 當然只要保證你的用戶都是用ie訪問,這樣的非標準也但用無妨。
  
  然而,很多第三方瀏覽器剛出來的時候,為了保證能與當時大量的非標準頁面兼容,都保留了用id訪問DOM這一非標準做法。事實上如今的主流瀏覽器,只有FireFox不支援這種做法,而Chrome,Opera,Safari,Mobile Safari都支援。
  
  既然如此,我們不如讓FireFox也支持,這樣所有的瀏覽器都可以直接用id直接訪問DOM,不僅快捷方便,減少了累贅的程式碼,更能提升運行的效率。
  
  實現很簡單,文檔載入完成後查詢帶有id屬性的元素,然後在window對象裡添加其引用:

複製代碼 程式碼如下:

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

當然,只有FF需要這個hack,所以我們先檢測下是否有其特徵。最後精簡下程式碼,利用陣列遍歷回調,即可壓縮到簡單的一行:
複製程式碼 程式碼如下:

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

  不過有個值得注意的地方,在文件載入尚未完成前querySelectorAll,只能查詢目前<script>之前的元素。所以以上程式碼必須放在文件的最後。而使用id訪問,也必須在文件載入完成之後,否則就可能找不到這個元素。下面是個測試頁面,在所有瀏覽器下都通過: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="17236" class="copybut" id="copybut17236" onclick="doCopy('code17236')"><U>複製代碼 代碼如下:<div class="codebody" id="code17236"> <BR><!DOCTYPE html> <BR><html> <BR><head> <BR><title>No document.getElementById <BR> <BR><body> <BR><div id="mytag"> <BR><script> <BR>onload = function() <BR>{ <BR>mytag.innerHTML = "Goodbye, document.getElementById!"; <BR>} <BR></script>
<script> <BR>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e){self[e.id ]=e}); <BR></script>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板