AJAX开发简略 (第二部分)

2019-09-14 07:33:37王旭
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 + "rn"; //保存标记名
	}
	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)" 
onClick="alert('标记总数:' + countTotalElement(document) + 'rn

全部标记如下:rn' + elementName);elementName='';">开始统计</a> </body> </html>

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