JS实现读取xml内容并输出到div中的方法示例


Posted in Javascript onApril 19, 2018

本文实例讲述了JS实现读取xml内容并输出到div中的方法。分享给大家供大家参考,具体如下:

note.xml文件结构:

<nooo>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>a</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
</nooo>

利用js将xml输出到div中:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com js读取xml</title>
    <style>
     .aaaa{width: 30%;height: 50px;line-height: 50px;text-align: center;border: 1px solid darkblue;float: left;}
    </style>
  </head>
  <body>
    <div id="xmlid"></div>
    <script>
      xmltext = new XMLHttpRequest;
      xmltext.open("GET","note.xml",false);
      xmltext.send();
      a = xmltext.responseXML;
      //document.getElementById("xmlid").innerHTML = a.getElementsByTagName("to")[2].childNodes[0].nodeValue;
      x = a.getElementsByTagName("note");
      for(i=0;i<x.length;i++)
      {
        document.write("<div class='aaaa'>");
        document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);
        document.write("</div>");
        document.write("<div class='aaaa'>");
        document.write(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue);
        document.write("</div>");
        document.write("<div class='aaaa'>");
        document.write(x[i].getElementsByTagName("body")[0].childNodes[0].nodeValue);
        document.write("</div>");
      }
    </script>
  </body>
</html>

运行效果:

JS实现读取xml内容并输出到div中的方法示例

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
使用javascript访问XML数据的实例
Dec 27 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
You might like
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Js四则运算函数代码
2012/07/21 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python实现远程控制电脑
2019/05/23 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2014年共青团工作总结
2014/12/10 职场文书
办公室主任岗位职责
2015/01/31 职场文书
妇产科护理心得体会
2016/01/22 职场文书