js读取xml数据

来源：互联网发布：怎么优化古墓丽影崛起编辑：程序博客网时间：2024/04/29 20:09

xml数据：cities.xml

<?xml version="1.0" encoding="GB2312"?><china><province name="河北"><city>石家庄</city><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><city>佳木斯</city></province><province name="吉林"><city>长春 </city><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><city>永州</city></province><province name="辽宁"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city><city>辽阳</city><city>营口</city><city>盘锦</city></province></china>

js代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>二级下拉框</title><script type="text/javascript">/** * 加载xml文档 * @param {Object} file */function parseXML(file){var xmlDoc;try{//IE浏览器,创建一个空的xml文档xmlDoc = new ActiveXObject("Microsoft.XMLDOM");}catch(e){try{//firefox,mazilla,opera,etc.,创建一个空的xml文档xmlDoc = document.implementation.createDocument("","",null);}catch(e){alert("xml解析失败！！！");}}//关闭异步加载xmlDoc.async="false";//加载xml文件xmlDoc.load(file);return xmlDoc;}window.onload = function(){//调用函数加载xmlvar xmlfile = parseXML("cities.xml");//得到select 节点var provinces = document.getElementById("provinces"); //从xml中得到所有的province节点var xmlProvinces = xmlfile.getElementsByTagName("province");/**两次的值竟然不一样**/alert("原来:"+xmlProvinces.length);alert("后来："+xmlProvinces.length);//先清空所有的列表for(var i =0 ;i<xmlProvinces.length; i++){//拼装成optionvar option = document.createElement("option");//给option设置属性option.setAttribute("value",xmlProvinces[i].getAttribute("name"));var value = document.createTextNode(xmlProvinces[i].getAttribute("name")); //将值添加到optionoption.appendChild(value);//将option添加到selectprovinces.appendChild(option);}//得到cities的select节点var cities = document.getElementById("cities");provinces.onchange= function(){//删除城市select节点原来有的内容，从后往前山for(var i=cities.options.length;i>0;i--){cities.remove(i);}var xmlprovinces = xmlfile.getElementsByTagName("province");for(var i=0;i<xmlprovinces.length;i++){if(xmlprovinces[i].getAttribute("name")== provinces.value){var xmlcities = xmlprovinces[i].getElementsByTagName("city");for(var j = 0 ;j<xmlcities.length;j++){//组装optionvar option = document.createElement("option");var optionText = document.createTextNode(xmlcities[j].firstChild.nodeValue);option.appendChild(optionText);cities.appendChild(option);}}}}}</script></head><body><select name="provinces" id="provinces" ><option value="">------请选择省份------</option></select><select name="cities" id="cities"><option value="">------请选择城市------</option></select></body></html>

有一个小问题：有的浏览器不兼容

比如

/**两次的值竟然不一样**/alert("原来:"+xmlProvinces.length);alert("后来："+xmlProvinces.length);

两次打印的值不一样，在第40行，没想通为什么，高手请赐教！！！

0 0