读取XML文件内容

来源：互联网发布：电磁炉品牌知乎编辑：程序博客网时间：2024/05/16 12:03

city.xml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>city</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><select id="province" name="province"><option value="">请选择……</option><option value="吉林省">吉林省</option><option value="辽宁省">辽宁省</option><option value="山东省">山东省</option><option value="四川省">四川省</option></select><select id="city" name="city"><option value="">请选择……</option></select></body><script language="JavaScript">window.onload=function(){document.getElementById("province").onchange=function(){//alert("ddd");/*****************************************************************************************************///获取变化的省的值var changeProvinceValue=this.value;//吉林省  辽宁省//alert(changeProvinceValue);/*****************************************************************************************************///清空城市下拉选var cityElement = document.getElementById("city");/*<select id="city" name="city"><option value="">请选择……</option></select>*/var cityoptionElements =  cityElement.getElementsByTagName("option");//从后往前删除for(var i = cityoptionElements.length-1;i>0;i--){cityElement.removeChild(cityoptionElements[i]);}/*****************************************************************************************************///测试xml是否加载成功var xmlDoc = parseXML("cities.xml");/*****************************************************************************************************/var provinceElement = null;//定位到具体省，此处取的是cities.xml文件中省var xmlProvinceElements = xmlDoc.getElementsByTagName("province");for(var i=0;i<xmlProvinceElements.length;i++){var xmlProvinceElement = xmlProvinceElements[i];var nameAttrValue = xmlProvinceElement.getAttribute("name");//alert(nameAttrValue);//cities.xml文件中省名if(changeProvinceValue==nameAttrValue){//把符合条件的省保存在外部方便下面使用provinceElement = xmlProvinceElement;break;//如果选中的省与遍历的省相等，就不往下面执行}}/*****************************************************************************************************//**<province name="吉林省"><city>长春市</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province>**///provinceElement!=null说明在XML里找到了选中的省并赋值给了provinceElement//alert("provinceElement="+provinceElement.getAttribute("name"));if(provinceElement!=null){//找到此省下的city并放在city select下var xmlCityElements = provinceElement.getElementsByTagName("city");for(var i=0;i<xmlCityElements.length;i++){//xmlCityElement为<city>长春市</city>var xmlCityElement = xmlCityElements[i];//长春市是xmlCityElement的firstChild//alert(xmlCityElement.firstChild.nodeValue);var cityValue = xmlCityElement.firstChild.nodeValue;//创建option标签<option></option>var optionElement = document.createElement("option");//<option value="长春市"></option>optionElement.setAttribute("value",cityValue);//长春var txtElement = document.createTextNode(cityValue);//<option value="长春市">长春市</option>optionElement.appendChild(txtElement);//增加到city select下/*<select id="city" name="city"><option value="">请选择……</option></select>*/cityElement.appendChild(optionElement);}}/*****************************************************************************************************/}}/*加载XML文件*/function parseXML(filename){// 用于 IE 的代码：try{  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){try{// 用于 Mozilla, Firefox, Opera, 等浏览器的代码： xmlDoc=document.implementation.createDocument("","",null);}catch(e){}}//关闭异步加载xmlDoc.async=false;//加载xml文档xmlDoc.load(filename);return xmlDoc;}</script></html>

cities.xml

<?xml version="1.0" encoding="UTF-8"?><china><province name="吉林省"><city>长春市</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province><province name="辽宁省"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city><city>铁岭</city></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>潍坊</city></province><province name="四川省"><city>成都</city><city>广安</city><city>资阳</city><city>巴中</city><city>南充</city></province></china>