javascript-解析xml文件-在html中实现二级联动分析及案例

最新推荐文章于 2023-08-26 00:46:05 发布

Android开发Neil

最新推荐文章于 2023-08-26 00:46:05 发布

阅读量605

点赞数

分类专栏： javascript随笔

本文链接：https://blog.csdn.net/u014174328/article/details/40591975

版权

javascript随笔专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.分别建立html,js,xml文件，
2.用html设置链接用js来约束，同时用xml存储文件，我的理解是，html是窗口，js是加工场，xml是资源库
3.分析js解析xml文件
（1）首先声明xml文件中的所有省的节点对象
（2）获取xml中所有省的节点-->html中id=pro对应节点对象-->遍历-->获取具体省的节点-->获取省的名称;当获取了东西之后你得有盛这些东西的容器，所以得创建html中option元素来盛，然后呢你得给这个option元素约束，就是它这里面能放什么，有什么属性和名称，设置文本节点，然后把optionNde添加到proNode中，
（3）获取html中的city对应的节点对象，然后是获取选中的省的名称，然后给选中的注册事件，然后用匿名函数去处理选中的事件
（4）选中的匿名函数的内部处理，获取html中的city对应的节点对象，当这个获取完成后，要清空得到的数据才能重新获取，要获取城市节点对象就得先获取具体的省的节点和名称，用遍历的方法，如果这个值和选中的省的名称一样就赋值给选中的，然后用for循环来得到省中的城市名称，光得到了值，首先得创建容器来成所得到的值，同上(2)
4.获取xml中的Document对象，不同的浏览器有不同的方式，首先得声明一个xmldoc对象，
值得注意的是：异步关闭，这个和线程有关，好好理解/*// 第一步：1.有了xml文件需要解析，那么首先呢你得到xml doc document对象；
//            2.注意不同的浏览器得到的方式不一样
 *            3.去获取xml的Document对象，下面是具体的方法

<pre name="code" class="html"><?xml version="1.0" encoding="UTF-8"?>
<china>
	<province name="河北省">
	<city>石家庄</city>
	<city>保定市</city>
	<city>沧州市</city>
	<city>邯郸市</city>
	<city>衡水市</city>
	</province>
	<province name="北京">
	<city>丰台</city>
	<city>朝阳</city>
	<city>海淀</city>
	<city>昌平</city>
	<city>大兴</city>
	</province>
	<province name="天津">
	<city>北辰区</city>
	<city>和平区</city>
	<city>武清</city>
	<city>河西区</city>
	<city>杨柳清</city>
	</province>
</china>

<!DOCTYPE html>
<html>
  <head>
    <title>china.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./china.js"></script>
  </head>
  
  <body>
   <div>
   	<select id="pro"></select>
   	<select id="city"></select>
   </div>
  </body>
</html>

<pre name="code" class="javascript">/*//	第一步：1.有了xml文件需要解析，那么首先呢你得到xml doc document对象；
//            2.注意不同的浏览器得到的方式不一样
 *            3.去获取xml的Document对象，下面是具体的方法
 */
//19.声明xml文件中的所有省的节点对象
var provincesNode;

window.onload = function() {
//	第一步,这样就拿到了xml doc document对象,document对象相当于文档对象，然后在处理它的根节点
	var xmlDoc=getXmlDocument();
//	第二步,获取所有省的节点，这是xml中的根据name值获取根节点
	provincesNode=xmlDoc.getElementsByTagName("province");
//	4.第三步,获取html中select id=pro对应的节点对象
	var proNode=document.getElementById("pro");
	//1.	遍历,遍历的是xml中的值
	for(var i=0;i<provincesNode.length;i++){
//		2.获取具体的省节点
		var provinceNode=provincesNode[i];
//		3.获取省的名称
		var provinceName=provinceNode.getAttribute("name");
//		5.获取之后要添加到html中的select中pro中，创建html中option元素节点
		var optionNode=document.createElement("option");
//		6.给这个option元素节点赋值
		optionNode.setAttribute("value", provinceName);
//		7.设置文本节点
		optionNode.appendChild(document.createTextNode(provinceName));
//		8.添加到html中select id=pro对应的节点中
		proNode.appendChild(optionNode);
	}
//	9.获取选中的省的名称
	var selectProName=proNode.options[proNode.selectedIndex].value;
//	15.获取html中的city对应的节点对象
	var cityNode=document.getElementById("city");
	//1.	遍历,遍历的是xml中的值
//	10.for循环
	for(var j=0;j<provincesNode.length;j++){
//		2.获取具体的省节点
		var provinceNode=provincesNode[j];
//		3.获取省的名称
		var provinceName=provinceNode.getAttribute("name");
		//    11.获取选中的省名称(9中)与获取省的名称(3)比较
		if(selectProName==provinceName){
//			12.如果相同去抓city
			var citiesNode=provinceNode.getElementsByTagName("city");
//			13.获取city后用for循环
			for(var k=0;k<citiesNode.length;k++){
//				14.拿到省的具体的城市值，昌平是city的孩子的值
				var cityName=citiesNode[k].firstChild.nodeValue;
			
//				5.获取之后要添加到html中的select中pro中，创建html中option元素节点
				var optionNode=document.createElement("option");
//				6.给这个option元素节点赋值
				optionNode.setAttribute("value", cityName);
//				7.设置文本节点
				optionNode.appendChild(document.createTextNode(cityName));
//				16.添加到html中select id=pro对应的节点中
				cityNode.appendChild(optionNode);
			}
			
		}
	
	}
// 17.给selectProName注册事件
	proNode.οnchange=selectchange;
	
	
};
//18.electProName注册事件的函数处理
var selectchange=function(){
//	21.重新获取html中的city对应的节点对象
	var cityNode=document.getElementById("city");
//	20.清空的操作
	/*for(var c=0;c<cityNode.length;){
		cityNode.remove(0);
	}*/
	cityNode.length=0;
//	15.获取html中的city对应的节点对象
	var cityNode=document.getElementById("city");
	//1.	遍历,遍历的是xml中的值
//	10.for循环
	for(var j=0;j<provincesNode.length;j++){
//		2.获取具体的省节点
		var provinceNode=provincesNode[j];
//		3.获取省的名称
		var provinceName=provinceNode.getAttribute("name");
		//    11.获取选中的省名称(9中)与获取省的名称(3)比较
		if(this.value==provinceName){
//			12.如果相同去抓city
			var citiesNode=provinceNode.getElementsByTagName("city");
//			13.获取city后用for循环
			for(var k=0;k<citiesNode.length;k++){
//				14.拿到省的具体的城市值，昌平是city的孩子的值
				var cityName=citiesNode[k].firstChild.nodeValue;
			
//				5.获取之后要添加到html中的select中pro中，创建html中option元素节点
				var optionNode=document.createElement("option");
//				6.给这个option元素节点赋值
				optionNode.setAttribute("value", cityName);
//				7.设置文本节点
				optionNode.appendChild(document.createTextNode(cityName));
//				16.添加到html中select id=pro对应的节点中
				cityNode.appendChild(optionNode);
			}
			
		}
	}
};
/*
 * // 第一步：
 * 1.有了xml文件需要解析，那么首先呢你得到xml doc document对象； 
 * 2.注意不同的浏览器得到的方式不一样
 * 3.去获取xml的Document对象，下面是具体的方法
 */
function getXmlDocument() {
	// 根据不同的浏览器得到的方式不一样
	// 1.声明一个xmldoc对象
	var xmlDoc;
	// 如果是IE就直接创建，用ActiveXObject("Microsoft.XMLDOM")方法
	/**
	 * ActiveXObject("Microsoft.XMLDOM")方法分析及案例解释 
	 * 1.XMLHttpRequest 对象是 AJAX 的关键。
	 * 2.创建 XMLHttpRequest 对象
		不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。 
		Internet Explorer 使用 ActiveXObject。 
		其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
	 * 要克服这个问题，可以使用这段简单的代码： 
	 * 小案例： 
	 * var XMLHttp=null if (window.XMLHttpRequest) {
	 * XMLHttp=new XMLHttpRequest() } 
	 * else if (window.ActiveXObject) {
	 * XMLHttp=new ActiveXObject("Microsoft.XMLHTTP") 
	 * }
	 * 代码解释：
		首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。 
		然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。 
		如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest() 
		如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。 
		如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject() 
	 */
//	2.是用try catch抓取异常
	try{
//		1.如果是IE
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	 }catch(ex){
		 try{
//		2.如果不是Ie可能是firefox,opera浏览器，用下面的方法
			 xmlDoc=document.implementation.createDocument("", "", null);
		 }catch(e){
//		3.如果还有异常则输出
		alert("浏览器版本过低了！");
	}
 }
/***
 * 第2步只是告诉是XMLDOM对象，必须解析某个文件，
 * 那么第3步来加载文件
 */
//	 5.关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
	 /***
	  * 异步关闭：比如装载文件和加载文件是两个线程，xmlDom还没装载完，就把对象返回去了， xmlDoc.load("china.xml")相当于
	  * 开启一个子线程，就说当装载完毕之后再返回xmlDom对象
	  */
	 xmlDoc.async=false;//异步关闭
//	 3.装载xml文件
	 xmlDoc.load("china.xml");
//	 4.返回值
	 return xmlDoc;
	 
}