XML：使用DOM技术解析xML文件中的城市，实现select级联选择

时间：2022-11-17 14:56:24

中国的城市xml格式：cities.xml

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

<china>

    <province name="北京">

        <city>东城区</city>

        <city>西城区</city>

        <city>崇文区</city>

        <city>宣武区</city>

        <city>朝阳区</city>

        <city>丰台区</city>

        <city>石景山区</city>

        <city>海淀区</city>

        <city>门头沟区</city>

        <city>房山区</city>

        <city>通州区</city>

        <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>

        <city>汉沽区</city>

        <city>大港区</city>

        <city>东丽区</city>

        <city>西青区</city>

        <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>

        <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>

        <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>

        <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>

        <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>

        <city>白城</city>

        <city>延边</city>

    </province>

    <province name="黑龙江">

        <city>哈尔滨</city>

        <city>齐齐哈尔</city>

        <city>鸡西</city>

        <city>鹤岗</city>

        <city>双鸭山</city>

        <city>大庆</city>

        <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>

        <city>虹口区</city>

        <city>杨浦区</city>

        <city>闵行区</city>

        <city>宝山区</city>

        <city>嘉定区</city>

        <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>

        <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>

        <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>

        <city>安庆</city>

        <city>黄山</city>

        <city>滁州</city>

        <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>

        <city>龙岩</city>

        <city>宁德</city>

    </province>

    <province name="江西">

        <city>南昌</city>

        <city>景德镇</city>

        <city>萍乡</city>

        <city>九江</city>

        <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>

        <city>济宁</city>

        <city>泰安</city>

        <city>威海</city>

        <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>

        <city>焦作</city>

        <city>濮阳</city>

        <city>许昌</city>

        <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>

        <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>

        <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>

        <city>湛江</city>

        <city>茂名</city>

        <city>肇庆</city>

        <city>惠州</city>

        <city>梅州</city>

        <city>汕尾</city>

        <city>河源</city>

        <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>

        <city>贵港</city>

        <city>玉林</city>

        <city>百色</city>

        <city>贺州</city>

        <city>河池</city>

        <city>来宾</city>

        <city>崇左</city>

    </province>

    <province name="海南">

        <city>海口</city>

        <city>三亚</city>

    </province>

    <province name="重庆">

        <city>重庆</city>

        <city>万州区</city>

        <city>涪陵区</city>

        <city>渝中区</city>

        <city>大渡口区</city>

        <city>江北区</city>

        <city>沙坪坝区</city>

        <city>九龙坡区</city>

        <city>南岸区</city>

        <city>北碚区</city>

        <city>万盛区</city>

        <city>双桥区</city>

        <city>渝北区</city>

        <city>巴南区</city>

        <city>黔江区</city>

        <city>长寿区</city>

        <city>綦江县</city>

        <city>潼南县</city>

        <city>铜梁县</city>

        <city>大足县</city>

        <city>荣昌县</city>

        <city>璧山县</city>

        <city>梁平县</city>

        <city>城口县</city>

        <city>丰都县</city>

        <city>垫江县</city>

        <city>武隆县</city>

        <city>忠县</city>

        <city>开县</city>

        <city>云阳县</city>

        <city>奉节县</city>

        <city>巫山县</city>

        <city>巫溪县</city>

        <city>石柱土家族自治县</city>

        <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>

        <city>遂宁</city>

        <city>内江</city>

        <city>乐山</city>

        <city>南充</city>

        <city>眉山</city>

        <city>宜宾</city>

        <city>广安</city>

        <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>

        <city>黔东南</city>

        <city>黔南</city>

    </province>

    <province name="云南">

        <city>昆明</city>

        <city>曲靖</city>

        <city>玉溪</city>

        <city>保山</city>

        <city>昭通</city>

        <city>丽江</city>

        <city>思茅</city>

        <city>临沧</city>

        <city>楚雄</city>

        <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>

        <city>榆林</city>

        <city>安康</city>

        <city>商洛</city>

    </province>

    <province name="甘肃">

        <city>兰州</city>

        <city>嘉峪关</city>

        <city>金昌</city>

        <city>白银</city>

        <city>天水</city>

        <city>武威</city>

        <city>张掖</city>

        <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>

        <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>

        <city>博尔塔拉</city>

        <city>巴音郭楞</city>

        <city>阿克苏</city>

        <city>克孜勒苏</city>

        <city>喀什</city>

        <city>和田</city>

        <city>伊犁</city>

        <city>塔城</city>

        <city>阿勒泰</city>

        <city>石河子</city>

        <city>阿拉尔</city>

        <city>图木舒克</city>

        <city>五家渠</city>

    </province>

    <province name="香港">

        <city>香港</city>

    </province>

    <province name="澳门">

        <city>澳门</city>

    </province>

    <province name="*">

        <city>*</city>

    </province>

</china>

下面，使用DOM解析xML文件中的城市，实现select级联选择

最基本的方法：selecCity.html

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>使用DOM解析city.xml,进行城市二级级联操作</title>

    <script type="text/javascript">

    //给加载页面绑定事件

    window.onload = function(){

        //从cities.xml文档中获取所有的#province节点

        //创建并添加所有的#province节点

        var provinceEle = document.getElementById('province');

        var xmlDoc = parseXML("cities.xml");

        provinceNodes = xmlDoc.getElementsByTagName('province');

        for (var i = 0; i < provinceNodes.length; i++) {

            var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点

            var optionNode = document.createElement('option'); //创建省份province的option子节点

            optionNode.innerHTML = paraNode.nodeValue;

            provinceEle.appendChild(optionNode);

        };

        //为#province添加change响应事件

        provinceEle.onchange = function(){

            //先把#city节点除第一个子节点外都移除（注意：每清除一次，数组是变化的）

            var cityNode = document.getElementById('city');

            var optionNodes = cityNode.childNodes;

            var len = optionNodes.length;

            for (var i = 2; i <len; i++) {

                cityNode.removeChild(optionNodes[2]);

            }

            if(this.value == "请选择...")  return;

            //获取对应的所有#city节点

            for (var i = 0; i < provinceNodes.length; i++) {

                var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点

                if (paraNode.nodeValue == this.value) {

                    //接着获取每一个#province对应的#city节点

                    var allsubTextNodes = provinceNodes[i].childNodes;

                    for (var k = 0; k < allsubTextNodes.length; k++) {

                        var optionNode = document.createElement('option');//创建城市city的option子节点

                        optionNode.innerHTML = allsubTextNodes[k].firstChild.nodeValue;

                        cityNode.appendChild(optionNode);

                    }

                }

            }

        }    

            //创建XML解析器

        function parseXML(xmlFile){

           try //Internet Explorer---ie浏览器的解析器创建方式如下：

           {

                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

           }

           catch (e) {

                try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。

                {

                     xmlDoc = document.implementation.createDocument("", "", null);

                }

                catch (e)

                {

                     alert(e.message);

                     return;   //如果创建不成功，就直接返回，不往下走。

                }

           }

           if(xmlDoc!=null){

                xmlDoc.async = false;

                xmlDoc.load(xmlFile);

           }

           return xmlDoc;   //返回创建好的解析器，传给调用者。

        }

    }

    </script>

</head>

<body>

    中国城市二级级联选择<br>

    <select id="province">

        <option>请选择...</option>

    </select>

    <select id="city">

        <option>请选择...</option>

    </select>

</body>

</html>

其实，还有一个更简单的方法，使用XPath技术，下面的实现效果是一样哟：selecCity2.html

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>使用DOM解析city.xml,进行城市二级级联操作</title>

    <script type="text/javascript">

    //给加载页面绑定事件

    window.onload = function(){

        //从cities.xml文档中获取所有的#province节点

        //创建并添加所有的#province节点

        var provinceEle = document.getElementById('province');

        var xmlDoc = parseXML("cities.xml");

        var xmlPath = "/china/province" //获取所有的#province属性节点

        var allProvinces = returnNodes(xmlDoc,xmlPath);

        alert(allProvinces.length);

        alert(returnNodes(xmlDoc,xmlPath).length);

        for (var i = 0; i < allProvinces.length; i++) {

            var nameNode = allProvinces[i].getAttributeNode("name");//属性节点

            var optionNode = document.createElement('option'); //创建省份province的option子节点

            optionNode.innerHTML = nameNode.nodeValue;

            provinceEle.appendChild(optionNode);

        };

        //为#province添加change响应事件

        provinceEle.onchange = function(){

            //先把#city节点除第一个子节点外都移除（注意：每清除一次，数组是变化的）

            var cityNode = document.getElementById('city');

            var cityOptions = cityNode.childNodes;

            var len = cityOptions.length;

            for (var i = 2; i <len; i++) {

                cityNode.removeChild(cityOptions[2]);

            }

            //省份没有选择,直接不执行下面的语句

            if (this.value == "请选择...") return;

            //获取#province对应下的所有子节点#city

            xmlPath = "//province[@name='"+this.value+"']"

            var optionNodes = returnNodes(xmlDoc,xmlPath);

            var cityNodes = optionNodes[0].childNodes;

            for (var i = 0; i < cityNodes.length; i++) {

                var optionNode = document.createElement('option');//创建城市city的option子节点

                optionNode.innerHTML = cityNodes[i].firstChild.nodeValue;

                cityNode.appendChild(optionNode);

            }

        }    

           //创建XML解析器

        function parseXML(xmlFile){

           try //Internet Explorer---ie浏览器的解析器创建方式如下：

           {

                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

           }

           catch (e) {

                try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。

                {

                     xmlDoc = document.implementation.createDocument("", "", null);

                }

                catch (e)

                {

                     alert(e.message);

                     return;   //如果创建不成功，就直接返回，不往下走。

                }

           }

           if(xmlDoc!=null){

                xmlDoc.async = false;

                xmlDoc.load(xmlFile);

           }

           return xmlDoc;   //返回创建好的解析器，传给调用者。

        }

         //使用XPath技术获取所有的元素节点

         function returnNodes(xmlDoc,xmlPath) {

             // code for IE

            if (window.ActiveXObject)

            {

                return xmlDoc.selectNodes(xmlPath);

            }

            // code for Mozilla, Firefox, Opera, etc.

            else if (document.implementation && document.implementation.createDocument)

            {

                return xmlDoc.evaluate(xmlPath, xmlDoc, null, XPathResult.ANY_TYPE,null);

            }

         }

    }

    </script>

</head>

<body>

    中国城市二级级联选择<br>

    <select id="province">

        <option>请选择...</option>

    </select>

    <select id="city">

        <option>请选择...</option>

    </select>

</body>

</html>

拓展：判断浏览器类型，这儿还给出判断一个浏览器的方法：

//判断浏览器

function myBrowser(){

     //取得浏览器的userAgent字符串

     var explorer = window.navigator.userAgent ;

     //iE

     if (explorer.indexOf("MSIE") > -1 && explorer.indexOf("compatible") > -1 && !explorer.indexOf("Opera")) {

           return "IE";

     }

     //firefox

     else if (explorer.indexOf("Firefox") > -1) {

           return "Firefox";

     }

     //Chrome

     else if(explorer.indexOf("Chrome") > -1){

           return "Chrome";

     }

     //Opera

     else if(explorer.indexOf("Opera") > -1){

           return "Opera";

     }

     //Safari

     else if(explorer.indexOf("Safari") > -1){

           return "Safari";

     }

}

效果图显示：

XML：使用DOM技术解析xML文件中的城市，实现select级联选择 XML：使用DOM技术解析xML文件中的城市，实现select级联选择

相关文章