通過JavaScript可以對XML文檔進行控制。本節(jié)將介紹如何用JavaScript控制XML文檔的分頁顯示和通過XML實現(xiàn)留言簿。
實例355 用JavaScript控制XML文檔的分頁顯示
本實例將介紹如何使用JavaScript控制XML文檔的分頁顯示。運行本實例，如圖14.7所示，在頁面中將顯示第一篇從XML文檔中獲取的博客文章，單擊“下一篇”超級鏈接，即可查看下一篇博客文章，單擊“上一篇”超級鏈接，即可查看上一篇文章。
圖14.7 用JavaScript控制XML文檔的分頁顯示
本實例主要通過XML數(shù)據(jù)島的recordset對象的absoluteposition屬性、recordcount屬性、movenext()方法和moveprevious()方法實現(xiàn)數(shù)據(jù)的分頁導航功能。下面分別進行介紹。
l absoluteposition：該屬性用于返回當前記錄的記錄號。
l recordcount：該屬性用于返回總記錄數(shù)。
l movenext()：該方法用于將記錄指針移動到下一條記錄。
l moveprevious()：該方法用于將記錄指針向前移動一條記錄。
（1）編寫doc.xml文件，在該文件中創(chuàng)建一個docs根元素，該元素由多個doc元素組成，代碼如下：
<?xml version="1.0" encoding="gb2312"?>
<docs>
<doc>
<id>1</id>
<author>無語</author>
<datetime>2007-03-03 11：50：12</datetime>
<topic>祝福</topic>
<content>你現(xiàn)在好嗎？今天快樂嗎？我從遠方送你的祝福收到了嗎？</content>
</doc>
<doc>
<id>2</id>
<author>wgh</author>
<datetime>2007-03-15 10：20：42</datetime>
<topic>春天</topic>
<content>東風來了，春天的腳步近了.....</content>
</doc>
</docs>
（2）首先使用一個XML數(shù)據(jù)島（id=d）載入 doc.xml文檔，然后使用<span>標記的datasrc屬性與id為d的XML數(shù)據(jù)島進行綁定，再使用<span>標記的datafld屬性與XML文檔對應(yīng)的XML元素進行綁定，關(guān)鍵代碼如下：
<xml id="d" src="doc.xml" async="false"></xml>
<table width="90%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"
bordercolordark="#FFFFFF" bordercolorlight="#999999">
<tr>
<td height="25" colspan="2">博客ID號：<span datasrc="#d"
datafld="id"></span></td>
<td width="35%">作者：<span datasrc="#d" datafld="author"></span></td>
<td width="43%">發(fā)表日期：<span datasrc="#d" datafld="datetime"></span></td>
</tr>
<tr>
<td height="25" colspan="4">博客主題：<span datasrc="#d"
datafld="topic"></span></td>
</tr>
<tr>
<td width="11%" height="25">文章內(nèi)容</td>
<td height="25" colspan="3"><span datasrc="#d" datafld="content"></span></td>
</tr>
</table>
（3）編寫自定義的JavaScript函數(shù)moveNext()，用于向后移動一條記錄，代碼如下：
<script type="text/javascript">
function moveNext(){
x=d.recordset;
if (x.absoluteposition < x.recordcount){
x.movenext();
}
}
（4）編寫自定義的JavaScript函數(shù)movePrevious()，用于向前移動一條記錄，代碼如下：
function movePrevious(){
x=d.recordset;
if (x.absoluteposition > 1){
x.moveprevious();
}
}
</script>
（5）在頁面的適當位置添加“上一篇”和“下一篇”超級鏈接，并在其onClick事件中調(diào)用相應(yīng)方法，代碼如下：
<a href="#" onClick="movePrevious()">上一篇</a>
<a href="#" onClick="moveNext()">下一篇</a>
根據(jù)本實例，讀者可以：
實例356 通過操作XML數(shù)據(jù)島實現(xiàn)添加、刪除留言信息
本實例將介紹如何通過操作XML數(shù)據(jù)島實現(xiàn)添加、刪除留言信息。運行本實例，在“留言人”文本框中輸入“wgh”，在“表情”文本框中輸入“微笑”，在“電話”文本框中輸入“495****”，在“留言內(nèi)容”文本框中輸入“祝大家新年快樂！”，單擊“添加留言”按鈕，在頁面中將以列表形式顯示留言信息，如圖14.8所示，單擊“刪除第一條留言”按鈕，將刪除第一條留言信息，單擊“刪除最后一條留言”超級鏈接，即可刪除最后一條留言信息。
圖14.8 通過操作XML數(shù)據(jù)島實現(xiàn)添加、刪除留言信息
本實例主要通過XML DOM對象實現(xiàn)。XML DOM對象的全稱是XML Document ObjectModel，即XML文檔對象模型，XML DOM定義了訪問和操作XML文檔的標準方式。下面將對本實例中應(yīng)用的XML DOM對象的屬性和方法進行介紹。
1．createElement()方法
createElement()方法用于創(chuàng)建一個指定名稱的元素，其語法格式如下：
xmlDocument.createElement(tagName);
參數(shù)說明
l tagName：用于指定新元素的名稱，區(qū)分大小寫。
2．createAttribute()方法
createAttribute()方法用于創(chuàng)建一個指定名稱的屬性，其語法格式如下：
xmlDocument.createAttribute(name);
參數(shù)說明
l name：用于指定屬性名稱。
3．createNode()方法
createNode()方法用于創(chuàng)建一個指定類型、名稱及命名空間的新節(jié)點，其語法格式如下：
xmlDocument.createNode(type, name, nameSpaceURI);
參數(shù)說明
l type：用于指定將要創(chuàng)建的節(jié)點的類型。
l name：用于指定新節(jié)點的名稱。
l nameSpaceURI：用于指定一個定義命名空間的URI。
4．createTextNode()方法
createTextNode()方法用于創(chuàng)建一個新的text節(jié)點，并包含指定的數(shù)據(jù)，其語法格式如下：
xmlDocument.createTextNode(data);
參數(shù)說明
l data：用于指定一個代表新text節(jié)點的字符串。需要注意的是，此時的text節(jié)點并沒有添加到文件樹中。若要將該節(jié)點添加到文件樹中，必須使用插入方法（例如：insertBefore、replaceChild或appendChild）。
5．insertBefore()方法
insertBefore()方法用于在指定的節(jié)點前插入一個子節(jié)點，其語法格式如下：
objDocumentNode=xmlDocumentNode.insertBefore(newChild,refChild);
參數(shù)說明
l newChild：用于指定一個包含新子節(jié)點地址的對象。
l refChild：用于指定參照節(jié)點的地址。新的子節(jié)點將被插到參照節(jié)點之前。如果refChild參數(shù)沒有包含在內(nèi)，新的子節(jié)點會被插到子節(jié)點列表的末端。
6．removeChild()方法
removeChild()方法用于將指定的節(jié)點從節(jié)點列表中移除，其語法格式如下：
objDocumentNode=xmlDocumentNode.removeChild(oldChild);
參數(shù)說明
l oldChild：用于指定一個要被移除的節(jié)點對象。
7．a(chǎn)ppendChild()方法
appendChild()方法用于在當前節(jié)點的最后加入一個新的節(jié)點，其語法格式如下：
xmlDocumentNode.appendChild(newChild);
參數(shù)說明
l newChild：用于指定一個要添加新子節(jié)點的地址。
8．hasChildNodes ()方法
如果指定的節(jié)點有一個或更多個子節(jié)點，hasChildNodes ()方法將返回True，否則將返回False，其語法格式如下：
boolValue=xmlDocumentNode.hasChildNodes() ;
9．lastChild屬性
lastChild屬性為只讀屬性，用于返回一個對象。如果節(jié)點中沒有包含最后子元素，將返回null，其語法格式如下：
objLastChild = xmlDocumentNode.lastChild;
（1）編寫board.xml文件，在該文件中創(chuàng)建一個boards根元素，該元素由多個board元素組成，代碼如下：
<?xml version="1.0" encoding="gb2312"?>
<boards>
<board>
<person>無語</person>
<humor>微笑</humor>
<tel>13634449161</tel>
<message>你現(xiàn)在好嗎？今天快樂嗎？我從遠方送你的祝福收到了嗎？</message>
</board>
</boards>
（2）使用一個XML數(shù)據(jù)島（id= board）載入board.xml文檔，并將其綁定到HTML表格（datasrc=# board）上，再將<span>標記的datafld屬性和XML文檔對應(yīng)的XML元素相互綁定，關(guān)鍵代碼如下：
<xml id="board" src="board.xml"></xml>
<table width="100%" border="1" cellpadding="0" cellspacing="0" datasrc="#board"
bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#96E2FA">
<thead>
<tr>
<th width="12%" height="27" bgcolor="#6AC7EC">留言人</th>
<th width="12%" bgcolor="#6AC7EC">表情</th>
<th width="21%" bgcolor="#6AC7EC">電話</th>
<th width="55%" bgcolor="#6AC7EC">留言內(nèi)容</th>
</tr>
</thead>
<tr>
<td height="27"><span datafld="person"></span></td>
<td><span datafld="humor"></span></td>
<td><span datafld="tel"></span></td>
<td><span datafld="message"></span></td>
</tr>
</table>
（3）編寫自定義的JavaScript函數(shù)addElement ()，用于在id為board的XML數(shù)據(jù)島中添加一條留言信息，代碼如下：
<script language="javascript">
xmldoc = board;
//添加留言信息
function addElement() {
var rootElement = xmldoc.documentElement;
//創(chuàng)建留言元素
var newBoard = xmldoc.createElement('board');
//添加留言人子元素
var person = xmldoc.createElement('person');
var personF = xmldoc.createTextNode(document.myform.person.value);
person.appendChild(personF);
newBoard.appendChild(person);
//添加表情子元素
var humor = xmldoc.createElement('humor');
var humorF = xmldoc.createTextNode(document.myform.humor.value);
humor.appendChild(humorF);
newBoard.appendChild(humor);
//添加電話子元素
var tel = xmldoc.createElement('tel');
var telF = xmldoc.createTextNode(document.myform.tel.value);
tel.appendChild(telF);
newBoard.appendChild(tel);
//添加留言信息子元素
var message = xmldoc.createElement('message');
var messageF = xmldoc.createTextNode(document.myform.message.value);
message.appendChild(messageF);
newBoard.appendChild(message);
//向文檔中追加一條留言信息
rootElement.appendChild(newBoard);
}
</script>
（4）編寫自定義的JavaScript函數(shù)deleteFirstElement ()，用于刪除第一個節(jié)點，代碼如下：
<script language="javascript">
function deleteFirstElement(){ //刪除第一個節(jié)點
var rootElement = xmldoc.documentElement;
if (rootElement.hasChildNodes())
rootElement.removeChild(rootElement.childNodes.item(0)); //刪除第一個節(jié)點
}
</script>
（5）編寫自定義的JavaScript函數(shù)deleteLastElement ()，用于刪除最后一個節(jié)點，代碼如下：
<script language="javascript">
function deleteLastElement(){ //刪除最后一個節(jié)點
var rootElement = xmldoc.documentElement;
if (rootElement.hasChildNodes())
rootElement.removeChild(rootElement.lastChild); //刪除最后一個節(jié)點
}
</script>
（6）在頁面的適當位置添加用于收集留言信息的表單，在該表單中添加“添加留言”按鈕、“刪除第一條留言”按鈕和“刪除最后一條留言”按鈕，并在這3個按鈕的onClick事件中調(diào)用相應(yīng)方法，代碼如下：
<form action="" method="post" id="myform" name="myform">
<table width="70%" height="131" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="24%" height="27" align="center">留 言 人：</td>
<td width="76%"><input type="text" name="person" id="person" size="50" /></td>
</tr>
<tr>
<td height="27" align="center">表 情：</td>
<td><input type="text" name="humor" id="humor" size="30" /></td>
</tr>
<tr>
<td height="27" align="center">電 話：</td>
<td><input type="text" name="tel" id="tel" size="20" /></td>
</tr>
<tr>
<td align="center">留言內(nèi)容：</td>
<td><textarea name="message" cols="50" rows="5" id="message"></textarea></td>
</tr>
<tr>
<td height="40" colspan="2" align="center"><input name="button" type="button"
class="btn_grey" onClick="check(myform);" value="添加留言" />
<input name="button22" type="button" class="btn_grey"
onClick="deleteFirstElement();" value="刪除第一條留言" />
<input name="button2" type="button" class="btn_grey"
onClick="deleteLastElement();" value="刪除最后一條留言" />
</td>
</tr>
</table>
</form>
根據(jù)本實例，讀者可以：
