因浏览器而异的空白节点(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。