因瀏覽器而異的空白節點(js清除空白節點)

先看下面的代碼：
<dl id="dll">
  <dt>title</dt>
  <dd>definition</dd>
</dl>

分別在IE瀏覽器FF瀏覽器下執行下面的代碼，作用是顯示<dl>標記子節點的個數。
var dll=document.getElementById("dll");
alert(dll.childNodes.length);

結 果顯示：IE為2，FF為5。兩個瀏覽器產生了不同的結果，這是由於一段文本是一個獨立的節點，但如果這段文本僅僅由空格，換行，制表符這些特殊的文本字 符組成，IE和FF就會產生分歧，IE會忽略這些節點，而FF則認可這些節點。分歧產生的原因是FF認為<dl> 和<dt>,</dt>和<dd>,</dd>和<dl>之間的空白節點也是一個單獨的節 點，所說FF的結果是5，而IE的結果是2。

對於節點的認定，IE在不同的場合也有不同的結果，如下：
<div>
 <img alt="ttt" src="yy.gif" />
 <span>some here</span>
</div>

IE認為改div有4個子節點，而FF仍然認為是5個，通過測試發現IE忽略了<div>和<img>標記之間的空白文本節點，而其他空白文本節點則未被忽略。

這種分歧給開發帶來了很大的難度，它影響了childNodes[index],nextSibling,previousSibling這些間接節點引用的行為，因為nextSibling很可能是一個無用的空白文本節點。解決這個問題是避免文檔中出現文本節點。如：
<dl id=”dll”><dt>title</dt><dd>definition</dd></dl>

這樣看上去不好閱讀。

另一種解決的辦法就是使用節點的判斷，判斷要引用的節點是不是需要的節點。prototype-1.3.1框架中提供了一個方法來解決這個問題，在使用前先刪除其中的空白節點：
<script language="javascript" type="text/javascript">
function cleanWhitespace(oEelement)
{
 for(var i=0;i<oEelement.childNodes.length;i++){
  var node=oEelement.childNodes[i];
  if(node.nodeType==3 && !/\S/.test(node.nodeValue)){node.parentNode.removeChild(node)}
  }
}
</script>

所以第一例子的代碼就可以改成：

var dll=document.getElementById("dll");
cleanWhitespace(dll);
alert(dll.childNodes.length);
結果在IE和FF都是2。