注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

长风明志的博客

不要也不能做下一个谁,应该且可以做第一个自己

 
 
 

日志

 
 

JS中解析XML并获取outerHTML  

2013-07-18 15:18:27|  分类: javascript/jQuer |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
我们解析XML一般是在后台解析XML,这可以使用很多工具如:JDOM、DOM4J、SAX这些,这里主要介绍前端JavaScript解析XML,并获取某个节点的outerHTML(如图所示):
JS中解析XML并获取outerHTML - changfengmingzhi - 长风明志的博客
要解析的XML文件:
<?xml version="1.0" encoding="UTF-8" ?>
<tbar id="tb" width="500" style="">
<button id="add" caption="新增">
<event>
<click url="http://clickUrl" /> 
</event>
</button>
<button id="modify" caption="修改">
<event>
<click url="http://clickUrl" />
</event>
</button>
<button id="del" caption="删除">
<event>
<click url="http://clickUrl" />
</event>
</button>
<separate />
<text id="username" required="false" maxlength="10">
<event>
<setValueUrl value="http://setValueUrl"/>
</event>
</text>
<button id="search" caption="查找">
<event>
<click url="http://clickUrl" />
</event>
</button>
</tbar>
解析XML的JS代码://loadXML.js

loadXML = function(xmlFile)
{
var xmlDoc;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
    {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 
xmlhttp.open("GET",xmlFile,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

return xmlDoc;
}

使用该解析XML代码的JS文件: //Test.js

function test(XML){
   var xmlDoc=loadXML(XML);
   //strXML=(new XMLSerializer()).serializeToString(xmlDoc);
   buttons=xmlDoc.getElementsByTagName('button');
   strXML=(new XMLSerializer()).serializeToString(buttons[0]); //获取第一个button元素的outerHTML内容
//alert(buttons[0].outerHTML); //直接使用outerHTML属性,结果为undefined
   alert(strXML);
}

 使用测试的HTML文件:

<html>
  <head>
      <script type="text/javascript" src="loadXML.js"></script>
<script type="text/javascript" src="Test.js"></script>
        <script type="text/javascript">
 // window.onload=function(){
 //test();
  //}
  Ext.onReady(function(){
  test("XML/myTbar.xml");
  });
</script>
  </head>
  <body></body>
</html>

此时alert弹出的对话框内容为:
<button id="add" caption="新增">
<event>
<click url="http://clickUrl" /> <!--做测试时默认为localhost:8060/debug/rtAdduser.xml-->
</event>
</button>
  评论这张
 
阅读(488)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017