XML DOM

最新推荐文章于 2024-09-11 17:39:54 发布

暮雪尘埃baby

最新推荐文章于 2024-09-11 17:39:54 发布

阅读量240

点赞数

分类专栏： web开发文章标签： xml dom js

本文链接：https://blog.csdn.net/sinat_22334885/article/details/50170191

版权

web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>