您的位置：首页 > Web前端 > JavaScript

解决js在火狐浏览器中的读取xml属性错误

2013-02-21 18:03 253 查看

原文来自：http://zhuleishitou.iteye.com/blog/969452

在出ie浏览器之外的浏览器在读取xml 会将空格换行都读取成节点

所以我们必须做出判断

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>city.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">



</head>

<body>

<h1> 解析xml文件实现省市级联下拉菜单 </h1>

<div> <span>

<select id="province" name="province">

<option> 请选择省 </option>

</select>

</span> <span>

<select id="cities" name="city">

<option> 请选择相应省下面的市 </option>

</select>

</span> </div>

</body>

</html>

<script>

window.onload = function() {

var xmlDom;

var bool_IE = (window.ActiveXObject ? true : false);

if (bool_IE) {

//针对的是IE浏览器创建一个空的微软 XML 文档对象

xmlDom = new ActiveXObject("Microsoft.XMLDOM");

} else {

//在 Firefox 及其他浏览器中的 XML 解析器

//创建一个空的 XML 文档对象。

xmlDom = document.implementation.createDocument("", "", null);

}

//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行

xmlDom.async = false;

//解析器加载名为 "xxx.xml" 的 XML 文档、

xmlDom.load("city.xml");

//获取xml文件的根节点

var root = xmlDom.documentElement;

//获取根节点下面的省节点

var provinces = root.childNodes;

var province = document.getElementById("province");

for ( var i = 0; i < provinces.length; i++) {

//获取省节点的name属性的值

//为了兼容火狐浏览器添加 ==============>provinces[i].nodeType==1

if (provinces[i].nodeType == 1) {

var name = provinces[i].getAttribute("name");

;

//创建一个option

var opt = document.createElement("option");

//为option添加文本

opt.appendChild(document.createTextNode(name));

//添加到父节点中

province.appendChild(opt);

}

}

var cities = document.getElementById("cities");

province.onchange = function() {

var pce = document.getElementById("province");

var opts = pce.options;

var opt1 = opts[pce.selectedIndex];

var name = opt1.innerHTML;

for ( var i = 0; i < provinces.length; i++) {

//获取省节点的name属性的值

var name1 = "";

if (provinces[i].nodeType == 1) {

name1 = provinces[i].getAttribute("name");

if (name == name1) {

cities.length = 1;//每次改变的时候清空

var pros = provinces[i];

var citys = pros.childNodes;

for ( var j = 0; j < citys.length; j++) {

//创建一个option

if (citys[j].nodeType == 1) {

var opt1 = document.createElement("option");

//为option添加文本

opt1

.appendChild(document

.createTextNode(citys[j].firstChild.nodeValue));

//添加到父节点中

cities.appendChild(opt1);

}

}

}

}

}

}

}

</script>

//xml中文件

======================================================================================

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

<cities>

<province name="北京">

<city>大兴</city>

<city>昌平</city>

<city>朝阳</city>

<city>海淀</city>

<city>东城</city>

<city>西城</city>

</province>

<province name="河北">

<city>石家庄</city>

<city>保定</city>

<city>邢台</city>

<city>张家口</city>

<city>廊坊</city>

<city>承德</city>

</province>

<province name="河南">

<city>郑州</city>

<city>安阳</city>

<city>平顶山</city>

<city>开封</city>

<city>商丘</city>

<city>洛阳</city>

</province>

</cities>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航