详细介绍阐述js获取xml文件中的数据的三种方法

来源:互联网 发布:web网络考勤系统 编辑:程序博客网 时间:2024/05/22 16:53

javascript操作xml文件可以实现创建,删除,插入节点,查询节点的属性值等,请看用Javascript 对XML进行访问,创建,插入,删除四动作
这里只讲怎么样利用js获取XML文件中的数据
举例说明
先创建一个xml文件
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<eyejs>
<options catename="js学习">
<options1 title="第一个分类">
<name>基础知识区</name>
<url>http://www.eyejs.com/html/16/category-catid-16.html</url>
</options1>
<options2>
<name>兼容ie 和ff浏览器的代</name>
<url>http://www.eyejs.com/html/17/category-catid-17.html</url>
</options2>
<options3>
<name>js小技巧区</name>
<url>http://www.eyejs.com/html/12/category-catid-12.html</url>
</options3>
</options>
<options catename="js组件"></options>
<regedit name="注册"></regedit>
</eyejs>
----------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
/*1. 第一步肯定是要创建一个操作xml文件的对象
可是IE和FF创建的方法不一样,所以要写个兼容IE和FF的
2. 加载XML文件
3. 获取或设置XML中的数据有如下方法
利用selectNodes或childNodes或
a. 对象.documentElement.childNodes.item(0) 根元素的直接子级第一个元素对象,依次累推......
获取是用text或getAttribute("属性名"),设置是用setAttribute("属性名",值)或text
b. 对象.documentElement.selectNodes("//根元素/直接子级1")或selectSingleNode
c. 对象.getElementsByTagName()
*/
创建一个操作xml文件的对象的方法
  function createXMLObj(xmlPath){
if(window.ActiveXObject){ //在IE下
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";  
xmlDoc.load(xmlPath);
}else if(document.implementation && document.implementation.createDocument){ //在FF下
xmlDoc=document.implementation.createDocument("", "", null);
xmlDoc.load(xmlPath);
}else{
return null;
}
return xmlDoc;
}
获取数据的三种方法
//方法一
//document.writeln( xdoc.documentElement.childNodes.item(2).childNodes.item(0).getAttribute("title") );
//方法二
//document.writeln( xdoc.documentElement.selectNodes("//eyejs/options/options1").item(0).childNodes.item(0).text );
//document.writeln( xdoc.documentElement.selectNodes("//eyejs/options/options1").item(0).getAttribute("title") );
//document.writeln( xdoc.documentElement.selectNodes("//eyejs/options/options1").item(0).attributes(0).value );
//方法三
//document.writeln( xdoc.getElementsByTagName("options")[0].getAttribute("catename") );
//document.writeln( xdoc.getElementsByTagName("options")[0].attributes[0] );
在获取数据时,在FF下一定要用
xdoc.onload=function(){  }来获取
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
举例js代码
function createXMLObj(xmlPath){
if(window.ActiveXObject){ //在IE下
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";  
xmlDoc.load(xmlPath);
getValue(xmlDoc);
}else if(document.implementation && document.implementation.createDocument){ //在FF下
xmlDoc=document.implementation.createDocument("", "", null);
xmlDoc.load(xmlPath);
xmlDoc.onload=function(){ getValue(xmlDoc); }
}else{
return null;
}
return xmlDoc;
}
function getValue(xmlDoc){
var arrTags=xmlDoc.getElementsByTagName("options1");
document.writeln( arrTags[0].getAttribute("title") );
}
完整案例:
eyejs_opjsxml.rar(1.31 KB)

出此:js大联盟  http://www.eyejs.com

原创粉丝点击