例子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_r("table")[0]; //第一个表格 var child = node.getElementsByTagName_r("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_r("table")[0]; var table2 = document.getElementsByTagName_r("table")[1]; var kid1 = table1.firstChild.firstChild.firstChild; //定位到<td>节点 var kid2 = table2.firstChild.firstChild.firstChild; //定位到<td>节点 var repKid = kid2.firstChild; //定位到表格二<td>内含的TextNode节点 try { //用表格二的单元格内容替换表格一的单元格内容，表格二变成没有单元格内容 kid1.replaceChild(repKid,kid1.firstChild); //下面注释如果开放，将出现object error，因为表格二已经被改变 //kid2.replaceChild(kid1.firstChild,kid2.firstChild); }catch(e){ alert(e); } } </script> </head> <body> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格一</td> </tr> </tbody> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格二</td> </tr> </tbody> </table> <br> <input type="button" name="replaceNode" value="替换" onClick="replaceContent()"> </body> </html> |
注意，当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被转移到table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释，试着运行一下，应该就知道文档是怎么改变的了。
D、往文档添加新内容
在学会遍历、搜索、修改文档之后，我们现在试着网文档添加新的内容。其实没有什么新意，只是利用我们上述提到的Node的属性和方法而已，还是操作<table>标记的内容。有新意的是，我们要实现一个留言簿。是的，留言簿，你可以往里面留言，只是不能刷新噢。
例子6 – sample5_1.htm：
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> function insertStr() { var f = document.form1; var value = f.str.value; if(value!="") { // 从最终的TextNode节点开始，慢慢形成<tbody>结构 var text = document.createTextNode(value); //新建一个TextNode节点 var td = document.createElement("td"); //新建一个td类型的Element节点 var tr = document.createElement("tr"); //新建一个tr类型的Element节点 var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点 td.appendChild(text); //将节点text加入td中 tr.appendChild(td); //将节点td加入tr中 tbody.appendChild(tr); //将节点tr加入tbody中 var parNode = document.getElementByIdx("table1"); //定位到table上 parNode.insertBefore(tbody,parNode.firstChild); //将节点tbody插入到节点顶部 //parNode.appendChild(tbody); //将节点tbody加入节点尾部 } } </script> </head> <body> <form name="form1" method="post" action=""> <input name="str" type="text" id="str" value=""> <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()"> </form> <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> <tbody> <tr> <td height="25">网友留言列表：</td> </tr> </tbody> </table> </body> </html> |
我们之前说过，<table>的子节点是<tbody>，<tbody>的子节点才是<tr>，<tr>是<td>的父节点，最后<td>内部的TextNode节点。所以，往<table>增加单元格行要逐级形成，就像往树里面添加一个枝桠一样，要有叶子有径。看看，这个留言簿是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一种方法。
E、使用DOM操作XML文档
在数据表示方面，XML文档更加结构化。DOM在支持HTML的基础上提供了一系列的API，支持针对XML的访问和操作。利用这些API，我们可以从XML中提取信息，动态的创建这些信息的HTML呈现文档。处理XML文档，通常遵循“加载XML文档à提取信息à加工信息à创建HTML文档”的过程。下面的例子演示了如何加载并处理XML文档。
这个例子包含两个JS函数。loadXML()负责加载XML文档，其中既包含加载XML文档的2级DOM代码，又有实现同样操作的Microsoft专有API代码。需要提醒注意的是，文档加载过程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加载完成后调用。
例子中的另外一个函数makeTable()，则在XML文档加载完毕之后，使用最后前介绍过的DOM应用编程接口读取XML文档信息，并利用这些信息形成一个新的table表格。
2603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
