AJAX开发简略 (第二部分)
l><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script language="javascript">function reverseNode(node) { // 颠倒节点node的顺序var kids = node.childNodes; //获取子节点列表var kidsNum = kids.length; //统计子节点总数for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列表var c = node.removeChild(kids[i]); //删除指定子节点，保存在c中node.appendChild(c); //将c放在新位置上}}</script></head><body><p>第一行</p><p>第二行</p><p>第三行</p><p><input type="button" name="reverseGo" value="颠倒" onClick="reverseNode(document.body)"></p></body></html>
例子4-- sample4_2.htm：
例子1通过直接操作body的子节点来修改文档。在HTML文档中，布局和定位常常通过表格<table>来实现。因此，例子4将演示操作表格内容，将表格的四个单元行顺序颠倒。如果没有使用<tbody>标签，则<table>把全部的<tr>当做是属于一个子节点<tbody>，所以我们采用数组缓存的方式，把行数据颠倒一下。这个例子同时也演示了如何使用DOM创建表格单元行。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script language="javascript">function reverseTable() {var node = document.getElementsByTagName("table")[0]; //第一个表格var child = node.getElementsByTagName("tr"); //取得表格内的所有行var newChild = new Array(); //定义缓存数组，保存行内容for(var i=0;i<child.length;i++) {newChild[i] = child[i].firstChild.innerHTML; }node.removeChild(node.childNodes[0]); //删除全部单元行var header = node.createTHead(); //新建表格行头for(var i=0;i<newChild.length;i++) {var headerrow = header.insertRow(i); //插入一个单元行var cell = headerrow.insertCell(0); //在单元行中插入一个单元格//在单元格中创建TextNode节点cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));}}</script></head><body><table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td> </tr> <tr> <td height="25">第三行</td> </tr> <tr> <td height="25">第四行</td> </tr></table><br><input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()"></body></html>
例子5 -- sample4_3.htm：
正如我们在Node节点介绍部分所指出的那样，appendChild()、replaceChild()、removeChild()、insertBefore()方法会立即改变文档的结构。下面的例子包含两个表格，我们试着把表格二的内容替换表格一的内容。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script language="javascript">function replaceContent() {var table1 = document.getElementsByTagName("table")[0];var table2 = document.getElementsByTagName("table");var kid1 = table1.firstChild.firstChild.firstC