AJAX开发简略 (第二部分)
例子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++;//如果是，计数器加1elementName = 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)" onClick="alert(''标记总数：'' + countTotalElement(document) + ''\r\n
全部标记如下：\r\n'' + elementName);elementName='''';">开始统计</a></body></html>
例子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++;//如果是，计数器加1elementName = 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;} B、搜索文档中特定的元素
在使用DOM的过程中，有时候需要定位到文档中的某个特定节点，或者具有特定类型的节点列表。这种情况下，可以调用Document对象的getElementsByTagName()和getElementById()方法来实现。
document.getElementsByTagName()返回文档中具有指定标记名的全部Element节点数组（也是NodeList类型）。Element出现在数组中的顺序就是他们在文档中出现的顺序。传递给getElementsByTagName()的参数忽略大小写。比如，想定位到第一个<table>标记，可以这样写：document.getElementsByTagName(“table”)[0]。例外的，可以使用document.body定位到<body>标记，因为它是唯一的。
getElementsByTagName()返回的数组取决于文档。一旦文档改变，返回结果也立即改变。相比，getElementById()则比较灵活，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性值。这个我们在《AJAX开发简略》的“级联菜单”例子中已经使用过了。
Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜索领域只针对调用者的子节点。
C、修改文档内容
遍历整棵文档树、搜索特定的节点，我们最终目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演示如何修改文档内容。
例子3 -- sample4_1.htm：
这个例子包含三个文本节点和一个按钮。点击按钮后，三个文本节点和按钮的顺序将被颠倒。程序使用了Node的appendChild()和removeChild()方法。
<htm