当前位置: > > > js - 获取xml子节点的个数不对(childNodes的length值不对)

js - 获取xml子节点的个数不对(childNodes的length值不对)

故障现象:最近遇到一个问题,需要使用JavaScript通过获取子节点的个数来进行节点操作,调试的时候发现IE8浏览器是没有问题的。可是,当我用谷歌浏览器测试时就发现了问题,发现取到的childNodes的length值不对了。

故障原因: 不同浏览器中childNodes获取的子节点个数是不同。 以一段简单的HTML代码为例:
<div id="div">
  <div id="div1">节点1</div>
  <div id="div2">节点2</div>
</div> 
var node = document.getElementById("div").childNodes; //获取div节点下的所有的子节点
alert(node.length); 
如果你用的浏览器是IE,而且IE<9,那得到的值为2 
如果你用的浏览器是谷歌,FF,IE>=9,那得到的值为5  
造成这种差异的原因是IE(IE<9)和其他浏览器处理空白文本节点的机制不一样 FF,谷歌,IE>=9浏览器会将各个节点之间的空白也算作一个节点,也就是说最外层div和div1之间存在一个空白节点,但是IE(IE<9)不会。

解决办法1:改变源码的书写格式,即节点间不留空格和换行
<div id="div"><div id="div1">节点1</div><div id="div2">节点2</div></div> 

解决办法2:调用childNodes属性之前先将空格删除
for(vari = 0; i < node.length; i++) { 
   //如果是文本节点,并且值为空,则删除该节点 
   if(node[i].nodeType == 3 && /\s/.test(node[i].nodeValue)) { 
      node[i].parentNode.removeChild(node[i]);        
   }
} 
alert(node.length);
评论0