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