首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议110:警惕文档遍历中的空格Bug

关灯直达底部

在遍历DOM文档元素时,空格的存在很容易造成误解,因为DOM把空格也作为一个节点进行解析(包括换行符)。通过下面的代码可以检测,DOM把元素之间的空格也视为一个文本节点。


var e=document.documentElement.lastChild.firstChild.nodeName;


为了解决这个问题,可以定义一个功能函数,设计在文档结构加载完毕之后调用该函数清除所有仅包含空格的文本节点。这样当执行文档遍历时,就不存在元素之间的空格影响了。详细代码如下:


//清除指定元素及其所有子元素之间的空格

//参数:指定要清除空格的起始节点

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渲染产生副作用,还会让定位DOM变得更容易。但需要注意的是,该函数的功能仅是临时性地清除元素之间的空格,需要在HTML文档的每一次加载时都重新执行一遍清除操作。当然,使用这种方法虽然比较高效,但是在每次遍历文档之前,都需要先执行一次遍历操作,如果文档的结构比较庞杂,那么这个操作所消耗的系统资源是不可小视的。一般应该尝试使用其他途径来定位节点,不可轻易地使用这种比较原始的方法。