讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議110:警惕文檔遍歷中的空格Bug >

建議110:警惕文檔遍歷中的空格Bug

在遍歷DOM文檔元素時,空格的存在很容易造成誤解,因為DOM把空格也作為一個節點進行解析(包括換行符)。通過下面的代碼可以檢測,DOM把元素之間的空格也視為一個文本節點。


var e=document.documentElement.lastChild.firstChild.nodeName;


為了解決這個問題,可以定義一個功能函數,設計在文檔結構加載完畢之後調用該函數清除所有僅包含空格的文本節點。這樣當執行文檔遍歷時,就不存在元素之間的空格影響了。詳細代碼如下:


//清除指定元素及其所有子元素之間的空格

//參數:指定要清除空格的起始節點

function clean(e){

var e=e||document;

var f=e.firstChild;

while(f!=null){

if(f.nodeType==3&&/\s/.test(f.nodeValue)){/

e.removeChild(f);

}

else if(f.nodeType==1){

arguments.callee(f);

}

f=f.nextSibling;

}

}


在準備遍歷DOM文檔時,可以先調用上面這個功能函數清除所有元素之間的空格,然後再遍歷文檔。這樣就可以實現在不同瀏覽器中進行兼容,並準確定位節點的位置。通過這種方式先清除空格,再實施遍歷,不僅不會對HTML渲染產生副作用,還會讓定位DOM變得更容易。但需要注意的是,該函數的功能僅是臨時性地清除元素之間的空格,需要在HTML文檔的每一次加載時都重新執行一遍清除操作。當然,使用這種方法雖然比較高效,但是在每次遍歷文檔之前,都需要先執行一次遍歷操作,如果文檔的結構比較龐雜,那麼這個操作所消耗的系統資源是不可小視的。一般應該嘗試使用其他途徑來定位節點,不可輕易地使用這種比較原始的方法。