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

最新推荐文章于 2021-08-06 02:24:09 发布

zhu473105308

最新推荐文章于 2021-08-06 02:24:09 发布

阅读量281

点赞数

文章标签：浏览器 xml stylesheet 文档 function firefox

本文链接：https://blog.csdn.net/zhu473105308/article/details/6265149

版权

在出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>

zhu473105308

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决js在火狐浏览器中的读取xml属性错误

<br />在出ie浏览器之外的浏览器在读取xml 会将空格换行都读取成节点 <br />所以我们必须做出判断 <br /> <br /><br /><br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /><head><br /><title>city.html</title><br /><meta http-equiv="keywords" content="keyword1,k
复制链接

扫一扫