一行代碼告別document.getElementById

2024-05-06 14:21:49

字體：大中小

供稿：網(wǎng)友

所以絕大多數(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>

上一篇：javascript簡單拖拽實現(xiàn)代碼(鼠標(biāo)事件 mousedown mousemove mouseup)

下一篇：javascript的數(shù)據(jù)類型、字面量、變量介紹