xml文件_<?xml>是单标签吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_43755916/article/details/100776945

1，顶端声明

<?xml version="1.0" encoding="utf-8"?>

2，所有的标签必须成对出现，没有单标签
3，严格区分大小写
4，xml允许全套，注意嵌套顺序

tom

5，每个标签允许自定义属性，格式与HTML一直，属性值，必须使用""括起来
6，每一个xml文档，有且只有一个根元素

xml文件

<?xml version="1.0" encoding="utf-8"?>
<studentlist>
	<student>
		<name>Tom</name>
		<age>18</age>
		<sex>男</sex>
	</student>
	<student>
		<name>Jerry</name>
		<age>18</age>
		<sex>男</sex>
	</student>
	<student>
		<name>Jeck</name>
		<age>18</age>
		<sex>男</sex>
	</student>

</studentlist>

HTML文件

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	</head>
	<body>
		<input type="button" value="异步获取xml数据" id="btn" onclick="getXML()">
		<div id="d1">
		
		</div>
		<script>
			function getXML(){
			var xhr=new XMLHttpRequest();
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&xhr.status==200){
					var result=xhr.responseXML;
					//result为string，所以我们用responseXML,这时候result是DOM对象了
					console.log(typeof(result));
					console.log(result);
					//获取对象中的标签中的值，studentlist标签的值为result
					//使用getElementsByTagName("标签名称")得到result内部所有的标签名称组成的数组
					/*var students=result.getElementsByTagName("student");
					console.log(students);
					console.log(students[1]);
					//获取Jerry标签
					var name1=students[1].getElementsByTagName("name")[0];
					//通过innerHTML打开要的名字
					console.log(name1.innerHTML);
					
					*/
					//把所有数据放入到3*3的表格
					var htmlcode="<table border='1px'>";
					var students=result.getElementsByTagName("student");
					for(var i=0;i<students.length;i++){
							var name=students[i].getElementsByTagName("name")[0];
							console.log(name.innerHTML);
							var age=students[i].getElementsByTagName("age")[0];
							console.log(age.innerHTML);
							var sex=students[i].getElementsByTagName("sex")[0];
							console.log(sex.innerHTML);
							htmlcode+="<tr><td>"+name.innerHTML+"</td><td>"+age.innerHTML+"</td><td>"+sex.innerHTML+"</td></tr>";
						}
					
					htmlcode+="</table>"
					console.log(htmlcode);
					d1.innerHTML=htmlcode
					
					
				}
			}
			xhr.open("get","test1.xml",true);
			xhr.send(null);
			}
		</script>	
	</body>
</html>