不同浏览器中childNodes获取子节点个数

以一段简单的HTML代码为例

<div id="div">
<div id="div01"> 这是div01</div>
<div id="div02"> 这是div02</div>
</div>
childNodes：获取某节点下的所有直接子节点

var node = document.getElementById("div").childNodes; //获取div节点下的所有子节点

在这个时候，如果你alert一下，从alert出的值中，你就会发现出问题了。
alert(node.length);
如果你用的浏览器是IE，而且IE<9，那得到的值为2
如果你用的浏览器是谷歌，FF，IE>=9，那得到的值为5

造成这种差异的原因是IE（IE<9）和其他浏览器处理空白文本节点的机制不一样
FF，谷歌，IE>=9浏览器会将各个节点之间的空白也算作一个节点，也就是说最外层div和div1之间存在一个空白节点，但是IE（IE<9）不会。

那么怎样做到各个浏览器的兼容呢，我这里有两种方法。

第一种方法是改变源码的书写格式

<div id="div"
><div id="div01">这是div01</div
><div id="div02">这是div02</div
></div>
经测试，所有alert的值都是2。但是这种写法看起来很别扭，并且写起来也很麻烦。要是很多很多的代码标签也不易于维护。

第二种方法是在调用childNodes属性之前先将空格删除。下面是一个删除空格的方法：

for (var i = 0; i < node.length; i++) {
//如果是文本节点，并且值为空，则删除该节点
if (node[i].nodeType == 3 && /\s/.test(node[i].nodeValue)) {
node[i].parentNode.removeChild(node[i]);
}
}
alert(node.length);
这样也能达到同样的效果，而且html代码格式也不需要改变。

PS：关于这个for循环的本质就是遍历所有的子节点，如果是文本节点，并且值为空，则删除该节点

node[i].nodeType == 3 的意思是判断子节点是不是文本节点

转载于:https://www.cnblogs.com/bigdesign/p/4069745.html