html中使用js加载xml文件

最新推荐文章于 2021-08-11 22:20:04 发布

lackdaylad

最新推荐文章于 2021-08-11 22:20:04 发布

阅读量603

点赞数

分类专栏：面试文章标签： js xml

本文链接：https://blog.csdn.net/lackdaylad/article/details/38277869

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<script type='text/javascript'>
   function parseXML(file){
   try //Internet Explorer---ie浏览器的解析器创建方式如下：
   {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   }
   catch (e) {
    try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
    {
     xmlDoc = document.implementation.createDocument("", "", null);
    }
    catch (e) {
     alert(e.message);
     return;   //如果创建不成功，就直接返回，不往下走。
    }
   }
   xmlDoc.async = false;
   xmlDoc.load(file);
   return xmlDoc;   //返回创建好的解析器，传给调用者。
  }
//以上部分是百度找的。。
var xml;	//xml解析器
var doc;	//解析后的document
var city;	//节点信息
function loadXML(file){
	//加载文件
	xml = parseXML(file);
	doc = xml.documentElement;

	var select = document.getElementById("list");
	//遍历xml元素 并加入select
	city = doc.getElementsByTagName("City");
	for(var i = 0; i<city.length ;i++){
		var opt = document.createElement("option");
		opt.value = i;		//此处value设为对应下标
		opt.innerText = city[i].getAttribute("Name");
		select.appendChild(opt);
	}
}

function showMSG(list){
	
	var cityMsg = document.getElementById("cityMsg");
	//获取对应下标
	var num = list.value;
	//当select框不是“请选择”时，显示城市信息
	if(!isNaN(num)){
		//显示当前选中城市的信息
		cityMsg.innerText = city[num].text;
	}
	//否则置为空
	else{
		cityMsg.innerText = "";
	}

}

	

</script>
<BODY>
	<input type="button" value="加载xml文件" οnclick="loadXML('city.xml')"><br>
	城市列表:
		<select id="list" name="list" οnchange="showMSG(this)">
			<option>请选择</option>
		</select>
	<br>
	城市信息：
	<textarea id="cityMsg" style="width:200px;height:120px;">

	</textarea>
</BODY>
</HTML>

lackdaylad

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中使用js加载xml文件

function parseXML(file){ try //Internet Explorer---ie浏览器的解析器创建方式如下： { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try //Firefox, Mozilla, Opera, etc. 火狐等浏览器
复制链接

扫一扫