xml文档(包括html)是从一个独立的根结点开始,它包含指向子节点的指针。每一个子节点都包含指针指向它的父节点、相邻节点和子节点。标准dom中,dom指针不仅可以指向元素,也可以指向文本节点。  请看以下html代码:

处理xml(html)中的空格<body>
处理xml(html)中的空格    
<h1>DOM简介</h1>
处理xml(html)中的空格
    <p id="test">DOM是一个表达XML文档的标准</p>
处理xml(html)中的空格
    <p>你随处可见dom的身影处理xml(html)中的空格</p>
处理xml(html)中的空格
</body>

    我想获得id为test的p元素的下一个p元素,可能理所当然的认为用document.getElementById('test').nextSibling就能获得。其实不然。在ie中确实能够获得你想要的,而在firefox、Opera9和Safari中你只能获得一个空格。《精通javascript》上提供了一个函数,用于处理xm中的这些空格,其作用原理就是找出文本节点,并删除这些节点,以达到删除这些空格的目的。

}

    正如书中作者所提到的,该函数的缺点是必须遍历每个DOM元素和文本节点,会严重降低网站的加载速度。每一次为文档注入新的html,都需要重新扫描dom中的新内容,确保没有增加新的有空格填充的文本节点。
    在这里,不妨做一个简单的判断,如果id为test的p元素的下一个节点是文本节点(即nodeType为3)的话,就继续往下遍历。如果是元素节点的话,则不需要往下遍历。代码如下:

处理xml(html)中的空格var testP = document.getElementById('test'); 
处理xml(html)中的空格    
var reason = testP.nextSibling;
}

    对非IE浏览器,可以用常量来表明不同的DOM节点类型。document.ELEMENT_NODE、document.TEXT_NODE、document.DOCUMENT_NODE代表元素节点、文本节点、文档节点。
    最后,利用数组写了一个函数,能够有效的处理dom中的空格,其原理就是将一个元素的的父元素找出来,然后通过它父元素的childNodes属性找出该元素的所有兄弟元素。遍历该元素和它的兄弟元素,将所有元素节点放在一个数组里。这样调用这个数组,就只有元素节点而没有文本节点,也就没有了讨厌的空格。
    该函数如下:

}

最后完整的一个示例如下:

处理xml(html)中的空格<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
处理xml(html)中的空格
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
处理xml(html)中的空格
<html xmlns="http://www.w3.org/1999/xhtml">
处理xml(html)中的空格
<head>
处理xml(html)中的空格
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
处理xml(html)中的空格
<title>DOMWhitespace</title>
处理xml(html)中的空格
<script type="text/javascript">
}

 





    原理是对元素的所有的子节点做一个遍历。然后做一个判断,如果是子元素节点(nodeType = 1),则遍历该子元素的所有的子节点,用递归检查是否包含空白节点;如果处理的子节点是文本节点(nodeType = 3),则检查是否是纯粹的空白节点,如果是,就将它从xml对象中删除。
    这个函数,应该和上面我自己写的函数作用和使用方法基本一样。非常不错的函数。

  本博文发布3天后,我在《ajax宝典》上又看到了一个用于处理xml中空格的好函数。原理还是一样的,代码如下:

相关文章:

  • 2021-12-12
  • 2022-12-23
  • 2021-12-24
  • 2021-12-03
  • 2022-12-23
  • 2021-11-07
  • 2022-12-23
  • 2022-02-15
猜你喜欢
  • 2022-12-23
  • 2021-12-12
  • 2022-12-23
  • 2022-12-23
  • 2021-05-01
  • 2021-07-20
相关资源
相似解决方案