Blog / 阅读

谈谈Javascript中的空格Bug问题和解决方案

by admin on 2014-04-12 14:12:26 in ,



之前的几篇博客中,有讲到部分示例的结果是有出入的,而最大的障碍就是这个Javascript中的空格Bug问题。当然了有问题就有解决的问题的方案。


首先明确为什么会出现这个问题:
DOM把空格也作为一个节点进行解析了(包括换行符)。下面就是一个示例来测试DOM把元素之间的空格也视为一个文本节点。
[html] view plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
<body>  
<span>Demo</span>示例  
<script>  
window.onload = function()  
{  
    var e = document.documentElement.lastChild.firstChild.nodeName;  
    alert(e);  
}  
</script>  
</body>  
</html>  


正因为这个Bug的出现,给遍历文档带来很大的风险。为了解决这个问题,有人专门写了一个能清除所有仅包含空格的文本节点。代码如下:
[javascript] view plaincopyprint?
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加载的时候都要执行一下清除操作。所以一般我们定位我们所要的元素对象或节点,一般都会用document.getElementById或者document.getElementByTagName直接定位过去,而不轻易使用这种方法。


写评论

相关文章

上一篇:js加密原理

下一篇:Flex4 数据绑定简单示例

评论

写评论

* 必填.

分享

栏目

赞助商


热门文章

Tag 云