XML file:
<?xml version= "1.0" encoding= "GBK"?>
<NewInfo>
<News>
<Title> It's going to rain today </Title>
<Content> It really rained today </Content>
<Date>2009-02-04</Date>
</News>
<News>
<Title> today out of the sun </Title>
<Content> It's really out of the sun today </Content>
<Date>2009-02-03</Date>
</News>
<News>
<Title> today is boring </Title>
<Content> It's really boring today </Content>
<Date>2009-02-02</Date>
</News>
</NewInfo>
HTML file:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<TITLE>JS Read xmldemo</title>
<script language= "javascript" type= "Text/javascript" >
function Newinfoaction ()
{
var dom;
var type=1; The default is IE browser
var data = new Array (); Storing an array of entities
if (Navigator.userAgent.indexOf ("MSIE") >0)
{
Dom = new ActiveXObject ("Microsoft.XMLDOM"); Instantiating a DOM object
Dom.async = false;
Dom.load ("B.xml"); Load XML file
Window.alert (' IE ');
}
else if (Isfirefox=navigator.useragent.indexof ("Firefox") > 0)
{
type=2;
Dom = Document.implementation.createDocument ("", "", null); Firefox does not support ActiveXObject
Dom.async = false;
Dom.load ("B.xml");
}
Else
{
Window.alert (' Don't recognize the browser! ');
Return
}
if (DOM)
{
var node;
if (type = = 1)//To determine whether IE browser
{
node = dom.documentElement.childNodes; Node Here you can understand the table in net, easy to understand
for (Var i=0;i<node.length;i++)
{
var title = Node[i].childnodes[0].text; Take out the values of the fields in the I row so it's easier to understand
var content = Node[i].childnodes[1].text;
var date = Node[i].childnodes[2].text;
Window.alert (title);
Window.alert (content);
Window.alert (date);
Data.push ({title:title,content:content,date:date}); Here, we use JSON to store the database inside
}
}
Else
{
var node = dom.getelementsbytagname ("News");
for (Var i=0;i<node.length;i++)
{
Window.alert (Dom.getelementsbytagname ("News") [i].childnodes[1].textcontent);
Window.alert (Dom.getelementsbytagname ("News") [i].childnodes[3].textcontent);
Window.alert (Dom.getelementsbytagname ("News") [i].childnodes[5].textcontent);
var value = dom.getelementsbytagname ("News") [I].textcontent.split (');
var title = Value[4];
var content = value[8];
var date = value[12];
Data.push ({title:title,content:content,date:date}); Here, we use JSON to store the database inside
}
}
}
Else
{
Window.alert ("Dom object is empty, failed!");
Return
}
if (data.length!= 0)
{
var shtml = ';
for (Var i=0;i<data.length;i++)
{
sHTML + = ' <div> ';
sHTML + = ' <div style= ' float:left; background-color:red; width:80px; height:15px ">";
sHTML + = Data[i].title;
sHTML + = ' </div> ';
sHTML + = ' <div> ';
sHTML + = ' <div style= ' float:left; background-color:green;width:150px; height:15px ">";
sHTML + = data[i].content;
sHTML + = ' </div> ';
sHTML + = ' <div style= ' float:left; background-color:green;width:120px; height:15px ">";
sHTML + = Data[i].date;
sHTML + = ' </div> ';
sHTML + = ' </div> ';
sHTML + = ' </div> ';
sHTML + = ' <br/> ';
}
document.getElementById (' Textdiv '). InnerHTML = shtml;
}
Else
{
document.getElementById (' Textdiv '). InnerHTML = ' No information! '
}
}
</script>
<body onload= "newinfoaction ()" >
<div id= "Textdiv" >
</div>
</body>