参考 http://www.w3school.com.cn/xmldom/dom_document.asp

A.xml

<?xml version="1.0" encoding="utf-8"?>

<root>

 <data id="1">

 <lon>114.065995</lon>

 <lat>22.66754</lat>

 <name>站点1</name>

 </data>

 <data id="2">

 <lon>114.060010</lon>

 <lat>22.66754</lat>

 <name>站点2</name>

 </data>

 <data id="3">

 <lon>114.060020</lon>

 <lat>22.66754</lat>

 <name>站点3</name>

 </data>

 <data id="4">

 <lon>114.060030</lon>

 <lat>22.66754</lat>

 <name>站点4</name>

 </data>

 <data id="5">

 <lon>114.060040</lon>

 <lat>22.66754</lat>

 <name>站点5</name>

 </data>

</root>

2、读取数据

// 生成XML对象

function loadXMLDom(fileName)

{

     if (window.XMLHttpRequest)

    {

        xhttp=new XMLHttpRequest();

    }

    else

    {

        xhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

        xhttp.open("GET",fileName,false);

    xhttp.send();

    return xhttp.responseXML;

}

function stationDatas(fileName)

{

   var xmlDom=loadXMLDom(fileName);

   //获得根节点

   var root=xmlDom.documentElement;

   var data="";

   var names=root.getElementsByTagName("name");

   var lons=root.getElementsByTagName("lon");

   var lats=root.getElementsByTagName("lat");

   var len=names.length;

   for(var i=0;i<len;i++)

   {

     data +="name";

     data += names[i].firstChild.nodeValue;

     data += "lon";

     data += lons[i].firstChild.nodeValue;

   }

   return data;

}

3、html 引用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<script type="text/javascript" src="js/mytrans.js"></script>

<body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

</body>

<script type="text/javascript">

document.write(stationDatas("A.xml"));

</script>

</html>

4、结果

js 读xml文件的更多相关文章

  1. jQuery、JS读取xml文件里的内容（JS先通过document.implementation.createDocument方法将xml转换成document对象，jQuery将读取到的xml转成table）

    xml文件:test.xml <?xml version="1.0"?> <note> <to>George</to> <fr ...

  2. JS解析XML文件和XML字符串

    JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...

  3. Js读取XML文件为List结构

    习惯了C#的List集合,对于Javascript没有list 极为不舒服,在一个利用Js读取XML文件的Demo中,决定自己构建List对象,将数据存入List. 第一步,Js读取XML文件知识 X ...

  4. js操作XML文件兼容IE与FireFox

    最近项目中用到了xml,需求是用户安装产品时先把一系列的数据保存到xml文件中,当执行到最后一步时才写入数据库,这样最大限度的减少了数据库的访问,于是不得不纠结在各浏览器的兼容性的问题(悲哀啊.... ...

  5. IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助使用javascript脚本读取xml文件,这里暂只考虑IE浏览器st ...

  6. LinqToXML~读XML文件

    linq的出现,带给我们的是简结,快速,可读性,它由linq to sql,linq to object,linq to XML组成,我的博客之前有对linq to sql的讲解,而今天,我将讲一个l ...

  7. 用js解析XML文件，字符串一些心得

    解析XML文件遇到的问题 今天秦博士叫我解析一下XML文件,将里面的所有的X坐标Y坐标放在一个数组里面然后写在文档里让他进行算法比对,大家都知道了啦,解析XML文件获取里面的坐标数据什么的,当然是用前 ...

  8. js 读取xml文件

    读取xml文件 [原创 2007-6-20 17:35:37]     字号:大 中 小 js中读取xml文件,简单的例子: <html><head><script> ...

  9. js 对XML文件的保存与读取

    一.保存(在前端用js创建xml格式) function exportToXml(jsonStr){ var obj = eval('('+ jsonStr + ')'); var xmlDoc = ...

随机推荐

  1. 以前我对你不够好，我也很难受——CSS篇

    1)文字下划线.删除线.定划线 Text-decoration:underline /*下划线*/ Text-decoration:overline     /*顶划线*/ Text-decorati ...

  2. core直接获取报异常数据

    报异常直接跳转到/Home/Error [ResponseCache(Duration = , Location = ResponseCacheLocation.None, NoStore = tru ...

  3. Python 帮你玩微信跳一跳 GitHub Python脚本

    前言想自己搞游戏小程序的 在github 有人已经利用 python程序, 通过adb 获取不同型号安卓手机的系统截图,然后通过计算小人与目标位置距离之后得到准确的触摸时间,再通过 开发者模式里的 a ...

  4. openssl 证书cert与key合并pfx

    openssl pkcs12 -export -out server.pfx -inkey server.key -in server.crt

  5. [转]github 上传project代码

    原文地址:https://www.cnblogs.com/f1194361820/p/4741558.html 1)将远程仓库纳入管理 其实就是添加远程仓库,在你已有的本地仓库目录下执行如下命令: $ ...

  6. django 发帖时碰到的图片上传

    所用编辑器 [wangEditor.js] 图片上传接口 '/edit/image/' 返回内容  参照 https://www.kancloud.cn/wangfupeng/wangeditor3/ ...

  7. javascript_03-数据类型

    数据类型 JavaScript 和 Java 一样,也是有基本数据类型的.但也是有区别的. JavaScript中的数据类型 简单(基本.值)数据类型 number string boolean un ...

  8. Json：Restful

    JArray & JObject JArray与JObject在json的应用:无需定义相应的类对象,直接解析 JArray jarr = JArray.Parse(jsonStr); //数 ...

  9. python自动化

    自动化测试一些问题 什么是自动化测试? 自动化测试,顾名思义,自动完成测试工作.通过一些自动化测试工具或自己造轮子实现模拟之前人工点点/写写的工作并验证其结果完成整个测试过程,这样的测试过程,便是自动 ...

  10. webpack 配置react脚手架（三）：eslint 及优化

    首先谨记 eslint的官网:  http://eslint.cn/ 1 安装eslint  npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends ...