DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 一行代碼告別document.getElementById
一行代碼告別document.getElementById
編輯:關於JavaScript     
所以絕大多數的腳本裡,都是直接通過元素的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 < list.length; i++)
{
if(list[i].id)
window[list[i].id] = list[i];
}

當然,只有FF需要這個hack,所以我們先檢測下是否有其特征。最後精簡下代碼,利用數組遍歷回調,即可壓縮到簡單的一行:
復制代碼 代碼如下:
<script>
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this[k.id]=k});
</script>

  不過有個值得注意的地方,在文檔載入尚未完成前 querySelectorAll,只能查詢當前<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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved