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