XML DOM

来源：互联网发布：update数据库编辑：程序博客网时间：2024/06/16 18:17

1.建立如下所示的学生名册XML文档。

2. 编写JavaScript程序，从上述XML文件提取各节点数据，并把它输出。

第一步：利用DW创建”loadxmldoc.js”文件，如下图所示：

</pre><pre name="code" class="javascript">function loadXMLDoc(dname) {var xmlDoc=null;try //Internet Explorer  {    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");    xmlDoc.async=false;    xmlDoc.load(dname);  }catch(e)  {   try //Firefox, Mozilla, Opera, etc.     { var xmlhttp = new window.XMLHttpRequest();  xmlhttp.open("GET",dname,false);  xmlhttp.send(null);  xmlDoc = xmlhttp.responseXML.documentElement;      }   catch(e) {alert("can't load information!")}  }return xmlDoc;}

第二步：加载XML文档，并获取文本节点的值

<?xml version="1.0" encoding="gb2312"?><students><student id="A1"><name>张三</name><sex>男</sex><age>20</age></student><student id="A2"><name>李四</name><sex>女</sex><age>19</age></student><student id="A3"><name>王二</name><sex>男</sex><age>20</age></student></students>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生名册</title><script src="loadxmldoc.js"></script></head><body><script>xmlDoc=loadXMLDoc("student.xml");document.write(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[0].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue+"<br>");</script></body></html>

第三步：运行并观察结果

思考：如果要将XML文档中所有的文本结点都输出该怎么办？

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生名册</title><script src="loadxmldoc.js"></script></head><body><script>xmlDoc=loadXMLDoc("student.xml");num=xmlDoc.getElementsByTagName("student").length;for(i=0;i<num;i++){document.write(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[i].childNodes[0].nodeValue+"<br>");}</script></body></html>

3. 将ID号为”A1”的同学的性别改为女。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生名册</title><script src="loadxmldoc.js"></script></head><body><script>xmlDoc=loadXMLDoc("student.xml");num=xmlDoc.getElementsByTagName("student");for(i=0;i<num.length;i++){sex1=num[i].getAttribute("id");if(sex1=="A1"){document.write("ID属性为A1的元素相关值如下："+"<br>");document.write(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[i].childNodes[0].nodeValue+"<br>");xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue="女";document.write("<hr>");document.write("属性值修改后的元素相关值如下："+"<br>");document.write(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[i].childNodes[0].nodeValue+"<br>");}}</script></body></html>

修改后的效果图如下：

4. 删除结点。将ID=”A1”的结点删除。参考代码和效果图如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生名册</title><script src="loadxmldoc.js"></script></head><body><script>xmlDoc=loadXMLDoc("student.xml");num=xmlDoc.getElementsByTagName("student");for(i=0;i<num.length;i++){sex1=num[i].getAttribute("id");if(sex1=="A1"){x=xmlDoc.getElementsByTagName("student")[i];xmlDoc.documentElement.removeChild(x);}document.write("删除结点后的内容如下："+"<br>");y=xmlDoc.getElementsByTagName("student");for(i=0;i<y.length;i++){document.write(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[i].childNodes[0].nodeValue+"<br>");document.write("<hr>");}}</script></body></html>

5. 创建结点。在原XML文档中为student结点添加子节点home,参考代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>学生名册</title><script src="loadxmldoc.js"></script></head><body><script>xmlDoc=loadXMLDoc("student.xml");var x=xmlDoc.getElementsByTagName("student");var newl,newtext;for(i=0;i<x.length;i++){newl=xmlDoc.createElement("home");newtext=xmlDoc.createTextNode("anhui");newl.appendChild(newtext);x[i].appendChild(newl);}for(i=0;i<x.length;i++){document.write(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("sex")[i].childNodes[0].nodeValue+"<br>");document.write(xmlDoc.getElementsByTagName("age")[i].childNodes[0].nodeValue);document.write(xmlDoc.getElementsByTagName("home")[i].childNodes[0].nodeValue);document.write("<hr>");}</script></body></html>

0 0