JavaScript案例精解（一）

初始知识：JavaScript操作XMLDOM对象
//两种方式创建XML对象
var doc = new ActiveXObject("Msxml2.DOMDocument");
var doc = new ActiveXObject("Microsoft.XMLDOM");//ie5.5+

//加载文档
//doc.load("b.xml");

//将XML文档设为同步方式，默认是异步方式
doc.async = false;

//创建文件头
var p = doc.createProcessingInstruction("xml\","version=1.0 encoding=gb2312");

//添加文件头
doc.appendChild(p);

//用于直接加载时获得根接点
//var root = doc.documentElement;

//两种方式创建根接点
var root = doc.createElement("students");
var root = doc.createNode(1,"students","");

//创建子接点
var n = doc.createNode(1,"ttyp","");
//添加孙接点
n.appendChild(o);

//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));

//添加注释
n.appendChild(doc.createComment("this is a comment\n"));

//添加子接点
root.appendChild(n);

//复制接点
var m = n.cloneNode(true);
root.appendChild(m);

//删除接点
root.removeChild(root.childNodes(0));

//遍历DOM文档
documentElement 文档根元素的引用
attributes 节点属性数组
childNodes 节点子节点数组
firstChild 第一个子节点引用
lastChild 最后一个子节点引用
parentNode 父节点
nextSibling 下一个邻居节点
previousSibling 上一个邻居节点
nodeName 节点名
nodeType 节点类型
nodeValue 节点值
ownerDocument 回到根节点

一、XML文件内容：
<?xml version="1.0" encoding="utf-8" ?>
<root>
    <prov id="p001" name="山东">
        <city id="c001" name="济南"></city>
        <city id="c002" name="青岛"></city>
    </prov>
    <prov id="p002" name="辽宁">
        <city id="c003" name="沈阳"></city>
        <city id="c004" name="大连"></city>
    </prov>
    <prov id="p003" name="江苏">
        <city id="c001" name="南京"></city>
        <city id="c002" name="苏州"></city>
    </prov>
</root>

二、HTML代码：
<form id="form1" runat="server">
<div>
    <asp:DropDownList ID="listProv" runat="server">
    </asp:DropDownList>
    <br />
    <asp:DropDownList ID="listCity" runat="server">
    </asp:DropDownList>
</div>
</form>

三、JavaScript代码：
<script type="text/javascript" language="javascript">
    var listprov = document.getElementById("listProv");
    //创建XMLDOM
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    var root;
    //将XMLDOM文档对象的访问方式设为同步，否则默认是异步方式
    xmlDoc.async = false;
    //加载XML文档对象
    xmlDoc.load("ProvCity.xml");
    //取得XML文档对象的根元素
    root = xmlDoc.documentElement;
    //遍历根元素下的直接子接点，加载到省份的下拉列表中
    for (var i=0; i<root.childNodes.length; i++)
    {
        //为省份下拉列表创建option
        var option = document.createElement("<option>");
        //设置option的文本
        option.innerText = root.childNodes[i].attributes[1].text;
        //设置option的value值
        option.value = root.childNodes[i].attributes[0].text;
        //向省份下拉列表加载上面的option
        listprov.appendChild(option);
    }

    //加载省份的函数
    function showcity()
    {
        //取得省份下拉列表框对象
        var list = document.getElementById("listProv");
        //取得城市下拉列表框对象
        var city = document.getElementById("listCity");
        //先清空原有的城市下拉列表项
        var n = city.options.length;
        for(var k=0;k<n;k++)
        {
            city.removeChild(city.options[0]);
        }
        //取得省份下拉列表的value值
        var ss = list.options[list.selectedIndex].value;
        //查询XML相关节点，并加载其元素
        for(var i=0;i<root.childNodes.length;i++)
        {
            //取得选中的省份的value
            var val = root.childNodes[i].attributes[0].text;
            //根据选中省份的value值，定位XML文件的指定元素，并加载相关的子元素
            if(val == ss)
            {
                var node = root.childNodes[i];
                //遍历当前节点的所有的子元素，并加载
                for(var j=0;j<node.childNodes.length;j++)
                {
                   
                    var option = document.createElement("<option>");
                    option.innerText = node.childNodes[j].attributes[1].text;
                    option.value = node.childNodes[j].attributes[0].text;
                    city.appendChild(option);
                }
            }
        }
    }
</script>