IE与FireFox中的childNodes区别

Javascript中，相信大家都试过用getElementsByTagName和childNodes来实现对节点的遍历。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!! 但是不幸的是，在IE和FireFox中childNodes有点细微的差别: 复制代码代码如下: <head> <script type="text/javascript"> function view(){ var childs1=$('FirstDiv').childNodes; var childs2=$('SecondDiv').childNodes; alert("length of FirstDiv: "+childs1.length+"--length of SecondDiv: "+childs2.length); } var $=function(id) { return document.getElementById(id); } </script> </head> <html > <body onload="view();">  <div id="FirstDiv"> <div>1</div> <div>2</div> <div>3</div> </div>  <div id="SecondDiv"><div>first</div><div>second</div><div>third</div></div> </html> 用IE和Firefox运行会有两个不同的结果：IE的结果是3:3；而Firefox则是7:3。怎么会有这种情况呢？在结构上，对象1和对象2不同的是对象1的子节点间有回车或者空格，而对象2则是一行写到尾。大家都应该想到了吧，IE是将一个完整标签作为一个节点。而 Firefox除了上述的的情况外，也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容（除注释外，包括任何的文字、空格、回车、制表符）也算是一个节点了。而且这种节点也有它们自己独特的属性和值－－nodeName="#text"。在实际运用中，Firefox在遍历子节点时，在for循环里不妨加上： if(childNode.nodeName=="#text") continue; 或者nodeType == 1。这样，便跳过不需要的操作，使程序运行的更有效率。附: Node.ELEMENT_NODE == 1 Node.ATTRIBUTE_NODE == 2 Node.TEXT_NODE == 3 Node.CDATA_SECTION_NODE == 4 Node.ENTITY_REFERENCE_NODE == 5 Node.ENTITY_NODE == 6 Node.PROCESSING_INSTRUCTION_NODE == 7 Node.COMMENT_NODE == 8 Node.DOCUMENT_NODE == 9 Node.DOCUMENT_TYPE_NODE == 10 Node.DOCUMENT_FRAGMENT_NODE == 11 Node.NOTATION_NODE == 12 var node = document.documentElement.firstChild; if(node.nodeType != Node.COMMENT_NODE) alert("You should comment your code well!");

　　推荐阅读

　　用dtree实现树形菜单 dtree使用说明

准备工作：请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文件 dtree.zip压缩包介绍： dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。目前有很多的树形菜单组件(比>>>详细阅读

本文标题：IE与FireFox中的childNodes区别

地址：http://www.17bianji.com/kaifa2/JS/24029.html

1/2 1