谈谈Javascript中的空格Bug有关问题和解决方案
日期：2014-05-16 浏览次数：20420 次
谈谈Javascript中的空格Bug问题和解决方案
正因为这个Bug的出现，给遍历文档带来很大的风险。为了解决这个问题，有人专门写了一个能清除所有仅包含空格的文本节点。代码如下：
有了这个函数，在遍历DOM文档时，可以先调用这个函数清除空格，再遍历文档。但不方便的是在每次的HTML加载的时候都要执行一下清除操作。所以一般我们定位我们所要的元素对象或节点，一般都会用document.getElementById或者document.getElementByTagName直接定位过去，而不轻易使用这种方法。
之前的几篇博客中，有讲到部分示例的结果是有出入的，而最大的障碍就是这个Javascript中的空格Bug问题。当然了有问题就有解决的问题的方案。
首先明确为什么会出现这个问题：
DOM把空格也作为一个节点进行解析了(包括换行符)。下面就是一个示例来测试DOM把元素之间的空格也视为一个文本节点。
<!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的出现，给遍历文档带来很大的风险。为了解决这个问题，有人专门写了一个能清除所有仅包含空格的文本节点。代码如下：
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直接定位过去，而不轻易使用这种方法。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
