JavaScript操作XML实例代码(获取新闻标题并分页,并分页)

  具体内容我没有做测试。仅供参考

  代码

  

复制代码 代码如下:

  <?xml version="1.0" encoding="gb2312"?>

  <NEWS>

  <New id="1" name="测试新闻1" time="2010-2-18">

  <NBody>新闻测试1新闻测试1</NBody>

  </New>

  <New id="2" name="测试新闻2" time="2010-2-18">

  <NBody>新闻测试2新闻测试2</NBody>

  </New>

  <New id="3" name="测试新闻3" time="2010-2-18">

  <NBody>新闻测试3新闻测试3</NBody>

  </New>

  <New id="4" name="测试新闻4" time="2010-2-18">

  <NBody>新闻测试4新闻测试4</NBody>

  </New>

  <New id="5" name="测试新闻5" time="2010-2-18">

  <NBody>新闻测试5新闻测试5</NBody>

  </New>

  <New id="6" name="测试新闻6" time="2010-2-18">

  <NBody>新闻测试6新闻测试6</NBody>

  </New>

  <New id="7" name="测试新闻7" time="2010-2-18">

  <NBody>新闻测试7新闻测试7</NBody>

  </New>

  <New id="8" name="测试新闻8" time="2010-2-18">

  <NBody>新闻测试8新闻测试8</NBody>

  </New>

  <New id="9" name="测试新闻9" time="2010-2-18">

  <NBody>新闻测试9新闻测试9</NBody>

  </New>

  </NEWS>

  JS 代码部分。js部分代码比较简单。 重要的就几XML 操作函数

  

复制代码 代码如下:

  //JavaScript

  function bindNew(index)

  {

  var List = new Array();

  List = showPage(index);

  var listul = "<ul style=\" font-size:12px \">"

  for( var i=0 ; i < List.length ; i++)

  {

  //document.getElementById("listTb").innerHTML += List[i]+"</br>";

  listul += "<li style=\" margin-top:4px\">"+ List[i] + "</li>";

  }

  listul += "</ul>";

  document.getElementById("listTb").innerHTML = listul;

  document.getElementById("refer").innerHTML = "";

  var tc = rtnPageCount();

  for( var i=1 ; i<=tc ; i++)

  {

  //<div style="width:14px; height:12px; color:#FFFFFF; background-color:#000000; float:left"></div>

  document.getElementById("refer").innerHTML += "<div style=\"width:14px; height:14px; color:#FFFFFF; background-color:#000000; float:left; cursor:hand\" onclick=\" bindNew("+i+")\">"+ i +"</div>";

  }

  }

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

  xmlDoc.async = false;

  xmlDoc.resolveExternals = false;

  xmlDoc.load("News.xml");

  // 返回固定 ID 的新闻

  function findNew(newid)

  {

  var Domelement = xmlDoc.documentElement;

  alert(Domelement);

  }

  // 返回分页后的新闻标题连接

  var pageSize = 40;

  function showPage(pageIndex)

  {

  var Alltt = new Array();

  Alltt = AlltitleLink();

  var rtLinks = new Array();

  /*未完成部分*/

  try

  {

  for( var i=0 ; i< pageSize && (pageSize*(pageIndex-1)+i)<Alltt.length ; i++)

  {

  rtLinks[i] = Alltt[pageSize*(pageIndex-1)+i];

  }

  }

  catch(e)

  { alert("showPage() 方法出错 !"); }

  return rtLinks;

  }

  //返分页后的页数

  function rtnPageCount()

  {

  var countx = getCount();

  if(countx%pageSize == 0)

  {

  return countx/pageSize ;

  }

  else

  {

  return countx/pageSize + 1 ;

  }

  }

  //返回新闻条数

  function getCount()

  {

  var NewRoot = xmlDoc.documentElement;

  var AllNews = NewRoot.childNodes;

  return AllNews.length;

  }

  //返回固定条数的新闻标题连接

  function returnNews(count)

  {

  var titles = new Array();

  var j = 0;

  NewRoot = xmlDoc.documentElement;

  allNews = NewRoot.childNodes;

  for( var i=0 ; i<allNews.length ; i++ )

  {

  if(i >= allNews.lenth)

  {

  titles[j] = "<a herf=\"../News.html?id=" + (i+1) + "\">"+ allNews[i].getArrtibute("name") +"</a>";

  j++;

  }

  }

  return titles;

  }

  //发回所有新闻 标题的超连接

  function AlltitleLink()

  {

  var allttLink = new Array();

  var NewRoot = xmlDoc.documentElement ;

  var allNews = NewRoot.childNodes;

  for( var i=0 ; i<allNews.length ; i++ )

  {

  var context = allNews[i];

  allttLink[i] = "<a href=\"../News.html?id="+(i+1)+"\">"+ context.getAttribute("time")+ " : " + context.getAttribute("name") +"</a>";

  }

  return allttLink;

  }

  部分Html 代码

  

复制代码 代码如下:

  <table width="90%" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; text-align:left">

  <tr>

  <td><div style="width:400px; border-bottom:1px dotted #999999; color:#333333; font-weight:bold">全部动态>></div></td>

  </tr>

  <tr>

  <td>

  <div id="listTb" class="listul"></div> </td>

  </tr>

  <tr>

  <td>

  <div id="refer"></div> </td>

  </tr>

  </table>

  希望对大家的学习工作又所帮助, 欢迎提问反馈