先看下面的代码:<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。