js中空白节点的问题

来源：互联网发布：淘宝数码店铺简介编辑：程序博客网时间：2024/05/16 05:59

看如下HTML代码

[html] view plain copy
<html>  
<head><title>DOM Test</title></head>  
<body>  
<table>   
    <tr>   
    <td id="TEST">  
        <input type="submit" value="确定"/>  
        <input type="button" value="取消"/>  
    </td>  
    </tr>   
</table>  
  
<script type="text/javascript">  
<!--  
    var td = document.getElementById("TEST");  
    alert(td.childNodes.length);    //结果为4   
-->  
</script>  
  
</body>  
</html>  

由于DOM中，空白也是作为一个文本节点，而两个input元素后面都有空白（回车、空格、制表符），所以结果为4，删除空白后结果为2。

为了处理里面的空格节点,用以下函数来处理。

[javascript] view plain copy
function cleanWhitespace(element)   
{   
    for(var i=0; i<element.childNodes.length; i++)   
    {   
        var node = element.childNodes[i];   
        if(node.nodeType == 3 && !/\S/.test(node.nodeValue))   
        {   
            node.parentNode.removeChild(node);   
        }   
    }   
}   

处理结点cleanWhitespace(document.getElementById("TEST"))后,OK,解决
-----------------------------------------------------------------------------------------------------------------------------------------------------

1.为什么会出现空白节点的问题

因为浏览器的差异在对于非空文本节点前面或后面有空格或换行符等特殊的文本字符组成，IE和FF就会产生分歧，IE会忽略这些节点，而FF则认可这些节点。

2.表现是形式

<dl >  <dt>title</dt>  <dd>definition</dd></dl>1
2
3
4

上面的一段代码段分别在IE浏览器FF浏览器下执行下面的代码，作用是显示

标记子节点的个数。
var dll=document.getElementById(“dll”);
alert(dll.childNodes.length);
你会发现…………………………
IE为2，FF为5。两个浏览器产生了不同的结果，这是由于一段文本是一个独立的节点，但如果这段文本仅仅由空格，换行，制表符这些特殊的文本字符组成，IE和FF就会产生分歧，IE会忽略这些节点，而FF则认可这些节点。分歧产生的原因是FF认为

,和

,和

之间的空白节点也是一个单独的节点，所说FF的结果是5，而IE的结果是2。

3.对我们的的影响

childNodes[index],nextSibling,previousSibling这些间接节点引用的行为，因为nextSibling很可能是一个无用的空白文本节点。

4.解决的办法

<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>

阅读全文

0 0