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

XML 代码部分 这是一个新闻的XML 文件,如果 NBody部分包含 XML 和Html 不可识别部分, 就 包含在DATA 表示附中。

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

代码

<?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 \">"
    
forvar 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();
    
forvar i=1 ; i<=tc ; i++)
    {
        
//<div style="14px; height:12px; color:#FFFFFF; background-color:#000000; float:left"></div>
        document.getElementById("refer").innerHTML += "<div style=\"14px; height:14px; color:#FFFFFF; background-color:#000000float: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
    {
        
forvar 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;
    
forvar 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="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>

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

原文地址:https://www.cnblogs.com/cestbon/p/js_avaScript_ML.html