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

之前的几篇博客中,有讲到部分示例的结果是有出入的,而最大的障碍就是这个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直接定位过去,而不轻易使用这种方法。

谈谈Javascript中的空格Bug问题和解决方案,布布扣,bubuko.com

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

上一篇:计通网实验的准备工作(2):成帧实现(C语言)


下一篇:多线程编程初步