JavaScript案例精解（一）

JavaScript案例精解（一）

2008年07月02日 星期三 09:06

初始知识：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>