js读取xml数据

xml数据：cities.xml

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="河北">
		<city>石家庄</city>
		<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>
		<city>佳木斯</city>
	</province>
	<province name="吉林">
		<city>长春 </city>
		<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>
		<city>永州</city>
	</province>
	<province name="辽宁">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
		<city>抚顺</city>
		<city>辽阳</city>
		<city>营口</city>
		<city>盘锦</city>
	</province>
</china>

js代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二级下拉框</title>
<script type="text/javascript">
	/**
	 * 加载xml文档
	 * @param {Object} file
	 */
	function parseXML(file)
	{
		var xmlDoc;
		try{
			//IE浏览器,创建一个空的xml文档
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		}catch(e){
			try{
				//firefox,mazilla,opera,etc.,创建一个空的xml文档
				xmlDoc = document.implementation.createDocument("","",null);
			}catch(e){
				alert("xml解析失败！！！");
			}
		}
		//关闭异步加载
		xmlDoc.async="false";
		//加载xml文件
		xmlDoc.load(file);
		return xmlDoc;
	}
	
	window.onload = function(){
		//调用函数加载xml
		var xmlfile = parseXML("cities.xml");
		//得到select 节点
		var provinces = document.getElementById("provinces");
		 //从xml中得到所有的province节点
		var xmlProvinces = xmlfile.getElementsByTagName("province");
		/**两次的值竟然不一样**/
		alert("原来:"+xmlProvinces.length);
		alert("后来："+xmlProvinces.length);
		//先清空所有的列表
		for(var i =0 ;i<xmlProvinces.length; i++){
			//拼装成option
			var option = document.createElement("option");
			//给option设置属性
			option.setAttribute("value",xmlProvinces[i].getAttribute("name"));
			var value = document.createTextNode(xmlProvinces[i].getAttribute("name")); 
			//将值添加到option
			option.appendChild(value);
			//将option添加到select
			provinces.appendChild(option);
		}
		
		//得到cities的select节点
		var cities = document.getElementById("cities");
		provinces.onchange= function(){
			//删除城市select节点原来有的内容，从后往前山
			for(var i=cities.options.length;i>0;i--){
				cities.remove(i);
			}
			var xmlprovinces = xmlfile.getElementsByTagName("province");
			for(var i=0;i<xmlprovinces.length;i++){
				if(xmlprovinces[i].getAttribute("name")== provinces.value){
					var xmlcities = xmlprovinces[i].getElementsByTagName("city");
					for(var j = 0 ;j<xmlcities.length;j++){
						//组装option
						var option = document.createElement("option");
						var optionText = document.createTextNode(xmlcities[j].firstChild.nodeValue);
						option.appendChild(optionText);
						cities.appendChild(option);
						
					}
				}
			}
		}
		
	}
	
</script>
</head>
<body>
	<select name="provinces" id="provinces" >
		<option value="">------请选择省份------</option>
	</select>
	
	<select name="cities" id="cities">
		<option value="">------请选择城市------</option>
	</select>
</body>
</html>

有一个小问题：有的浏览器不兼容

比如 

/**两次的值竟然不一样**/
		alert("原来:"+xmlProvinces.length);
		alert("后来："+xmlProvinces.length);

两次打印的值不一样，在第40行， 没想通为什么，高手请赐教！！！