JS实现读取xml内容并输出到div中的方法示例
更新时间：2018年04月19日 09:53:49 作者：包子源
这篇文章主要介绍了JS实现读取xml内容并输出到div中的方法,涉及javascript针对xml格式数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下
本文实例讲述了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>www.jb51.net 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>
运行效果：
PS：这里再为大家提供几款关于xml操作的在线工具供大家参考使用：
在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson
在线格式化XML/在线压缩XML：
http://tools.jb51.net/code/xmlformat
XML在线压缩/格式化工具：
http://tools.jb51.net/code/xml_format_compress
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作XML文件技巧总结》、《JavaScript文件与目录操作技巧汇总》、《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数据结构与算法技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
JS在TextArea光标位置插入文字+移动光标到文字末尾，Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性，具体实现如下，感兴趣的朋友可以参考下哈2013-06-06
本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解,如果您只需要解决问题,请阅读第一、二部分即可,如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分2023-10-10
本文给大家分享的是我们在使用javascript中的replace方法的时候需要注意的一个事项，我就是没有注意到，才被这个bug烦了好久，这里记录下来，有需要的小伙伴可以参考下。2015-05-05
js实现随机返回数组的一个元素，这是个奇妙的方法。适合做标题性质文字的随机轮换显示2007-08-08
这篇文章主要为大家详细介绍了js实现轮播图的完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了使用zrender.js绘制体温单效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
这篇文章主要介绍了p5.js入门教程之鼠标交互的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了JS实现进入页面时渐变背景色的方法,涉及javascript操作css控制背景色渐变的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
window.location.href是前端开发中一个非常重要且常用的属性,它为我们提供了获取和操作页面URL的便捷手段,本文主要介绍了js中window.location.href的用法大全,感兴趣的可以2023-12-12
javascript 控制 html元素 显示/隐藏实现代码
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。2009-09-09
最新评论