在HTML中通过JS实现对XML的加载

最新推荐文章于 2021-07-14 23:08:30 发布

梦康

最新推荐文章于 2021-07-14 23:08:30 发布

阅读量949

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

对搜狗、chrome兼容性不好，无法识别load()方法

stu.xml代码

<?xml version="1.0" encoding="utf-8"?>
<stulist>
	<stu id="1001">
		<name>张三</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1002">
		<name>李四</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1003">
		<name>王五</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1004">
		<name>赵六</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1005">
		<name>田七</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1006">
		<name>aa</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1007">
		<name>bb</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1008">
		<name>cc</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1009">
		<name>cc</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
	<stu  id="1010">
		<name>cc</name>
		<age>20</age>
		<sex>男</sex>
	</stu>
</stulist>

html的代码

<html>
	<head>
		<title>XML DOM</title>
		<script type="text/javascript">
		//定义加载xml文件处理函数
		function loadXMLDoc(dname){
			//创建xml解析对象
			try{
				xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //Internet Explorer
			}catch(e){
				try{
					//Firefox, Mozilla, Opera, etc.
					xmlDoc=document.implementation.createDocument("","",null);
				}catch(e){
					alert(e.message);
				}
			}
			//加载并返回
			try{
			  xmlDoc.async=false;
			  xmlDoc.load(dname);
			  return(xmlDoc);
			}catch(e) {
				alert(e.message);
			}
			return(null);
		}
		//使用(加载stu.xml文件)
		var stuob = loadXMLDoc("stu.xml");
		//alert(stuob);//输出[object XMLDocument]
		var list = stuob.getElementsByTagName("stu"); //获取所有stu节点
		//alert(list.length);
		//alert(list[0].childNodes[1].childNodes[0].nodeValue);
	
		var str="<table width='400' border='1'>";
		str+="<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";
		//遍历所有list节点
		for(var i=0;i<list.length;i++){
			//alert(list[i].nodeName);
			//获取每个stu节点的所有子节点
			str+="<tr>";
			var stu = list[i].childNodes;
			for(var j=0;j<stu.length;j++){
				//判断必须是元素节点
				if(stu[j].nodeType==1){
					str+="<td>"+stu[j].childNodes[0].nodeValue+"</td>"; //获取里面文本节点的值
				}
				
			}
			str+="</tr>";
		}
		str+="</table>";
		document.write(str);
		</script>	
	</head>
	<body>
		<h2 style="color:red">解析XML文档</h2>
	</body>
</html>