处理xml（html）中的空格
xml⽂档（包括html）是从⼀个独⽴的根结点开始，它包含指向⼦节点的指针。每⼀个⼦节点都包含指针指向它的⽗节点、相邻节点和⼦节点。标准dom中，dom指针不仅可以指向元素，也可以指向⽂本节点。请看以下html代码：
<body>
<h1>DOM简介</h1>
<p id="test">DOM是⼀个表达XML⽂档的标准</p>
<p>你随处可见dom的⾝影</p>
</body>
我想获得id为test的p元素的下⼀个p元素，可能理所当然的认为⽤ElementById('test').nextSibling就能获得。其实不然。在ie 中确实能够获得你想要的，⽽在firefox、Opera9和Safari中你只能获得⼀个空格。上提供了⼀个函数，⽤于处理xm中的这些空格，其作⽤原理就是出⽂本节点，并删除这些节点，以达到删除这些空格的⽬的。
function cleanWhitespace(element){
//如果不提供参数，则处理整个HTML⽂档
element = element || document;
//使⽤第⼀个⼦节点作为开始指针
var cur = element.firstChild;
//⼀直到没有⼦节点为⽌
while (cur != null){
//如果节点为⽂本节点，应且包含空格
if ( deType == && ! /\S/.deValue)){
/
/删除这个⽂本节点
//否则，它就是⼀个元素
} else if (deType == 1){html中的5种空格表示
//递归整个⽂档
cleanWhitespace( cur );
}
cur = Sibling;//遍历⼦节点
}
}
正如书中作者所提到的，该函数的缺点是必须遍历每个DOM元素和⽂本节点，会严重降低⽹站的加载速度。每⼀次为⽂档注⼊新的html，都需要重新扫描dom中的新内容，确保没有增加新的有空格填充的⽂本节点。
在这⾥，不妨做⼀个简单的判断，如果id为test的p元素的下⼀个节点是⽂本节点（即nodeType为3）的话，就继续往下遍历。如果是元素节点的话，则不需要往下遍历。代码如下：
var testP = ElementById('test');
var reason = Sibling;
deType == 1){
alert(reason.innerHTML);
} else deType == 3){
Sibling.innerHTML);
}
}
对⾮IE浏览器，可以⽤常量来表明不同的DOM节点类型。document.ELEMENT_NODE、document.TEXT_NODE、
document.DOCUMENT_NODE代表元素节点、⽂本节点、⽂档节点。
最后，利⽤数组写了⼀个函数，能够有效的处理dom中的空格，其原理就是将⼀个元素的的⽗元素出来，然后通过它⽗元素的childNodes属性出该元素的所有兄弟元素。遍历该元素和它的兄弟元素，将所有元素节点放在⼀个数组⾥。这样调⽤这个数组，就只有元素节点⽽没有⽂本节点，也就没有了讨厌的空格。
该函数如下：
function cleanWhitespaces(elem){
var elem = elem || document;
var parentElem = elem.parentNode;
var childElem = parentElem.childNodes;
var childElemArray = new Array;
for (var i=0; i<childElem.length; i++){
if (childElem[i].nodeType==1){
childElemArray.push(childElem[i]);
}
return childElemArray;
}
最后完整的⼀个⽰例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOMWhitespace</title>
<script type="text/javascript">
var testP = ElementById('test');
cleanWhitespaces(testP);
alert(testP.innerHTML);
}
function cleanWhitespaces(elem){
var elem = elem || document;
var parentElem = elem.parentNode;
var childElem = parentElem.childNodes;
var childElemArray = new Array;
for (var i=0; i<childElem.length; i++){
if (childElem[i].nodeType==1){
childElemArray.push(childElem[i]);
}
}
return childElemArray;
}
</script>
</head>
<body>
<h1>DOM简介</h1>
<p id="test">dom的⼴泛使⽤是有道理的，以下是⼀些原因：</p>
<p>你随处可见dom的⾝影</p>
<ul>
<li><a href="" title="">link1</a></li>
<li><a href="" title="">link2</a></li>
</ul>
</body>
</html>
function removeWhitespace(xml){
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++){
var currentNode = xml.childNodes[loopIndex];
if (deType == 1){
removeWhitespace(currentNode);
}
if (((/^\s+$/.deValue))) &&(deType == 3)){
}
}
}
原理是对元素的所有的⼦节点做⼀个遍历。然后做⼀个判断，如果是⼦元素节点（nodeType = 1），则遍历该⼦元素的所有的⼦节点，⽤递归检查是否包含空⽩节点；如果处理的⼦节点是⽂本节点（nodeType = 3），则检查是否是纯粹的空⽩节点，如果是，就将它从xml对象
这个函数，应该和上⾯我⾃⼰写的函数作⽤和使⽤⽅法基本⼀样。⾮常不错的函数。
本博⽂发布3天后，我在上⼜看到了⼀个⽤于处理xml中空格的好函数。原理还是⼀样的，代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。