IE和FireFox处理childNodes的异同

javascript中，可能会用到getElementsByTagName和childNodes来实现对节点的遍历。但是getElementsByTagName对DOM结构复杂的树遍历就明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构……

暂不比较他们的优劣，在这里我想说下的是用childNodes遍历DOM节点时，Firefox和IE的一个细微差别。

nodeName="#text"，你遇到过么？ 
下面这里给出一个例子：

<script type="text/javascript">
function view(){
var pn1=document.getElementById("pn1");
var pn2=document.getElementById("pn2");

var childs1=pn1.childNodes;
var childs2=pn2.childNodes;

alert("length of pn1: "+childs1.length+"--length of pn2: "+childs2.length);
}
</script>
<input type="button" value="查看节点长度" οnclick="view();" />

<div id="pn1"><!--第一个遍历对象，节点之间留有空格和回车-->
<div>first</div>
<div>second</div>
<div>third</div>
</div>

<div id="pn2"><!--第二个遍历对象，除注释外，节点间无空格回车--><div>first</div><div>second</div><div>third</div></div>

上面的例子有两个对象，用IE和Firefox运行会有两个不同的结果：IE的结果是3:3；而Firefox则是7:3。怎么会有这种情况呢？

在结构上，对象1和对象2不同的是对象1的子节点间有回车或者空格，而对象2则是一行写到尾。大家都应该想到了吧，IE是将一个完整标签作为一个节点。而Firefox除了上述的的情况外，也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容（除注释外，包括任何的文字、空格、回车、制表符）也算是一个节点了。而且这种节点也有它们自己独特的属性和值－－nodeName="#text"。

寒～ 在写html时，谁没有把标签格式化的？去了回车和空格，这样的代码怎么看嘛？想不到，我们平时认为没有问题的的地方，却在DOM遍历时产生那么多的麻烦。想不到竟然连回车也算是一个node了……

所以Firefox中，如果html按照大众化的 (其实就是各种html编辑器的默认的) 写法，用childNodes获得的子节点减1除2，那大概就是大家所需要的节点数了。（比方说只有3个html元素节点，节点间夹着有2个"#text"的节点，并且一头一尾各1个，那就是7个节点了。但是不推荐通过这样的方法获得真实的节点数，因为真实的节点数是要看html里面的层次结构。）

在实际运用中，Firefox在遍历子节点时，在for循环里不妨加上：

nodeType == 1。(表示这个节点是父节点的节点，而不是空格或者回车）
这样，便跳过不需要的操作，使程序运行的更有效率。

转自：http://www.okajax.com/a/200809/0Z1P322008.html