AJAX开发简略 (第二部分)(5)

  需要指出的是,childNodes[]的值实际上是一个NodeList对象。因此,可以通过遍历childNodes[]数组的每个元素,来枚举一个给定节点的所有子节点;通过递归,可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法:

  Node对象常用属性:

属性   描述  
attributes   如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。  
childNodes   以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。  
firstChild   以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。  
lastChild   以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。  
nextSibling   以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。  
nodeName   节点的名字,Element节点则代表Element的标记名称。  
nodeType   代表节点的类型。  
parentNode   以Node的形式返回当前节点的父节点。如果没有父节点,则为null。  
previousSibling   以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。  

  Node对象常用方法:

方法   描述  
appendChild()   通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。  
cloneNode()   复制当前节点,或者复制当前节点以及它的所有子孙节点。  
hasChildNodes()   如果当前节点拥有子节点,则将返回true。  
insertBefore()   给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。  
removeChild()   从文档树中删除并返回指定的子节点。  
replaceChild()   从文档树中删除并返回指定的子节点,用另一个节点替换它。  

  接下来,让我们使用上述的DOM应用编程接口,来试着操作HTML文档。

  A、遍历文档的节点

  DOM把一个HTML文档视为树,因此,遍历整个树是应该是家常便饭。跟之前说过的一样,这里我们提供两个遍历树的例子。通过它,我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树。

  例子1-- sample3_1.htm:
  这个例子使用了childNodes[]和递归方式来遍历整个文档,统计文档中出现的Element元素总数,并把Element标记名全部打印出来。需要特别注意的是,在使用DOM时,必须等文档被装载完毕再执行遍历等行为操作文档。sample3_1.htm具体代码如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> var elementName = ""; //全局变量,保存Element标记名,使用完毕要清空 function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //检查node是否为Element对象 total++; //如果是,计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记名 } var childrens = node.childNodes; //获取node的全部子节点 for(var i=0;i<childrens.length;i++) { total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作 } return total; } </script> </head> <body> <a href="javascript:void(0)">开始统计</a> </body> </html>

AJAX开发简略 (第二部分)

AJAX开发简略 (第二部分)

  例子2 – sample3_2.htm:
  接下来使用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数,其他跟sample3_1.htm一样:

function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //检查node是否为Element对象 total++; //如果是,计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记名 } var childrens = node.childNodes; //获取node的全部子节点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归操作 } return total; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfzjww.html