js解析xml

最新推荐文章于 2024-08-12 22:21:26 发布
最新推荐文章于 2024-08-12 22:21:26 发布
阅读量2k 收藏
点赞数
文章标签： xml stylesheet 浏览器 function html encoding
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/song3213210/article/details/6520652
版权

先是xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<cities>
 <province name="北京">
  <city>大兴</city>
  <city>昌平</city>
  <city>朝阳</city>
  <city>海淀</city>
  <city>东城</city>
  <city>西城</city>
 </province>
 <province name="河北">
  <city>石家庄</city>
  <city>保定</city>
  <city>邢台</city>
  <city>张家口</city>
  <city>廊坊</city>
  <city>承德</city>
 </province>
 <province name="河南">
  <city>郑州</city>
  <city>安阳</city>
  <city>平顶山</city>
  <city>开封</city>
  <city>商丘</city>
  <city>洛阳</city>
 </province>

</cities>

接下来是HTML文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Teacher02.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 </head>

 <body>

  <h1>
   解析xml文件实现省市级联下拉菜单
  </h1>

  <div>

   <span> <select id="province" name="province">
     <option>
      请选择省
     </option>
    </select> </span>

   <span> <select id="cities" name="city">
     <option>
      请选择相应省下面的市
     </option>
    </select> </span>

  </div>
 </body>
</html>
<script type="text/javascript">
<!--
 window.onload = function(){
  var xmlDOm;
  try{
   //获取针对IE浏览器的xml解析对象
   xmlDom = new ActiveXObject("Microsoft.XMLDOM");
  }catch(err){
   try{
    //获取针对其他浏览器的xml解析对象
    xmlDom = document.implementation.createDoucment("","",null);
   }catch(er){
   }
  }
  //关闭异步加载，确保在文档完全加载之前解析岂不会继续脚本的执行
  xmlDom.async="false";
  
  //解析器加载名为"xxx.xml"的xml文档
  xmlDom.load("city.xml");
  
  //获取xml文件的根节点
  var root=xmlDom.documentElement;
  
  //获取根节点下面的子节点
  var provinces = root.childNodes;
  
  var province = document.getElementById("province");
  for(var i=0;i<provinces.length;i++){
   //获取根结点的name属性的值
   var name=provinces[i].getAttribute("name");
   //创建一个option
   var opt=document.createElement("option");
   //为option添加文本
   opt.appendChild(document.createTextNode(name));
   //添加到父节点中去
   province.appendChild(opt);
  }
  var cities=document.getElementById("cities");
  province.οnchange=function(){
  
   var pce=document.getElementById("province");
   var opts=pce.options;
   var opt1=opts[pce.selectedIndex];
   
   var name=opt1.innerHTML;
   for(var i=0;i<provinces.length;i++){
    //获取根结点的name属性的值
    var name1=provinces[i].getAttribute("name");
    if(name==name1){
     cities.length=1;//每次改变的时候晴空
     var pros=provinces[i];
     var citys=pros.childNodes;
     for(var j=0;j<citys.length;j++){
      //创建一个option
      var opt1=document.createElement("option");
      //为option添加文本
      opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
      cities.appendChild(opt1);
     }
    }
   }
  } 
 }
//-->
</script>

经测试，不兼容opera浏览器

song3213210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页上读取远程xml的数据
成长的天空
01-24 1337
一个客户提供一个股价的信息，要求放在页面上，显示一些数据，需要从远程获取xml，然后解析写在网页上，开始不会觉得很难，其实蛮简单的，先用javascript写了一个：                         var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");             xmlDoc.async="false";       
javascript解析xml字符串的函数
10-30
总的来说，JavaScript解析XML字符串的关键在于处理不同浏览器的兼容性问题，使用`try...catch`结合`ActiveXObject`和`DOMParser`可以有效地实现这一目标。同时，理解XML文档的结构和DOM（文档对象模型）的概念对于...
js，asp 实现读取远程xml
weixin_30437847的博客
12-13 96
js 实现读取远程xml<script language="JavaScript"> var xmlDoc=new ActiveXObject("Microsoft.xmlDOM"); xmlDoc.async=false; xmlDoc.load("http://www.donews.com/rss.xml"); //xmlDoc.loadxml("<des...
JS解析XML文件和字符串的跨浏览器实现
Dumbbell的专栏
02-01 3038
大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 JavaScript 可存取的对象。但是IE和其它浏览器是有很大区别的解析 XML 文件 - 跨浏览器实现<!--try //针对IE和基于IE内核的浏览器 { xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
JS解析XML文件（跨浏览器）
IT人的日常
10-11 805
问题描述： 对指定xml文件进行解析，并显示解析出的内容。（给一个指定ip查询是否在xml文件中的ip范围内） xml文件内容如下： JS代码： function loadXMLDoc(dname) { try //Internet Explorer { xmlDoc=n
JavaScript 解析 xml 字符串
前端技术
10-27 1715
使用场景在获取 ArcGIS WMS 详细信息 http://localhost:6080/arcgis/services/World/MapServer/WMSServer?request=GetCapabilities&service=WMS 返回 xml 信息如下 使用loadXML 对象解析 // 支持 IE9+均支持、Google function loadXML(xmlString){ let domParser = new DOMParser(); ...
js解析xml文件
weixin_57011137的博客
10-28 3120
首先我们将拿到的据转成base64的格式，可以使用插件’js-base64‘ cnpm i js-base64 -S 下载插件， 页面 import { Base64 } from 'js-base64' export default function (xmlString: string) { const createObj = (xmlString: string) => { console.log(xmlString); let xmlDoc =
JavaScript解析xml数据.js
08-21
JavaScript解析xml数据
JS解析XML
03-16
在本文中，我们将深入探讨如何在JS中解析XML文档，这是一项重要的技能，尤其是在处理服务器返回的数据或者进行数据交换时。 XML（可扩展标记语言）是一种结构化数据格式，常用于存储和传输数据。由于其自描述性和...
JS解析XML的实现代码
10-29
在本文中，我们将深入探讨如何使用JavaScript解析XML（可扩展标记语言）文档，这是一种数据交换格式，常用于传输和存储结构化数据。 首先，我们需要了解JavaScript解析XML的两种主要方法：ActiveXObject（仅适用于...
JS解析XML实例分析
10-24
主要介绍了JS解析XML的方法,实例分析了javascript针对IE浏览器与非IE浏览器解析XML文件的技巧,非常具有实用价值,需要的朋友可以参考下
javascript 解析xml (chrome,firefox,safari,Opera,ie)
test808的专栏
06-21 188
注:不允许任何形式的转载 [code="java"] //loadXMl function loadXml(xmlFile){ var xmlDoc; if(window.ActiveXObject){ //IE xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=fal...
如何解析远程xml文件？
qdujunjie的专栏
04-03 1546
$url = "http://xxxx.163.com/xml.file"; xmlObj = simplexml_load_file($url); $arrXmlObj = get_object_vars($xmlObj); if(is_array($arrXmlObj['order'])){ $orders = $arrXmlObj['order']; forea
酒店行业如何利用XML进行营销短信
kuaixunhuaruan的博客
08-12 132
随着信息社会的到来，消费者获得会所的服务也从单纯的电话方式，逐渐转变为电话、互联网、传真，群发短信等多种媒体并行的方式。今天着重介绍下酒店行业如何利用短信平台进行营销。
已解决org.xml.sax.SAXNotRecognizedException异常的正确解决方法，亲测有效！！！
最新发布
小明的Java问道之路
08-12 768
已解决org.xml.sax.SAXNotRecognizedException异常的正确解决方法，亲测有效！！！
Java学习笔记（二十）：反射、动态代理、日志、类加载器、xml、单元测试Junit、注解
weixin_62764364的博客
08-09 842
​​ 是在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法；​ 对于任意一个对象，都能够调用它的任意属性和方法；​ 这种动态获取信息以及动态调用对象方法的功能称为Java语言的反射机制。​通俗的理解：（掌握）利用反射创建的对象可以无视修饰符调用类里面的内容可以跟配置文件结合起来使用，把要创建的对象信息和方法写在配置文件中。读取到什么类，就创建什么类的对象读取到什么方法，就调用什么方法此时当需求变更的时候不需要修改代码，只要修改配置文件即可。万维网联盟(W3C)
JavaScript解析XML详解与示例
"这篇文档主要介绍了如何在JavaScript中解析XML数据，包括针对不同浏览器环境的兼容性处理，以及XML数据的三种常见存储方式，并提供了一段示例代码用于创建和处理XML DOM对象。" 在JavaScript中解析XML文档，通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值