嗯，这是前几天写一个遍历双层List集合，动态输出对应的表格并且控制固定表头的效果时发现的一个知识点，程序编好后在IE8浏览器下测试没问题，在Firefox35.0.1总是报错，后来发现是IE与FF对HTML元素中的childNodes属性的“理解”不同造成的，这里记录一下，目的在于让自己记得浏览器中还有许多类似的不兼容性的问题，以后编程的时候需要多加的注意，当然，一步步的调试加上精准的定位问题，是解决问题的常用和极佳的方式！

OK，让简单的代码来发话吧！

1：简单的测试代码段一

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test childNodes</title>

        <script>

            function showChildNodes()

            {

                var parentDiv=document.getElementById("parentDiv");

                var childNodes=parentDiv.childNodes;

                for(var i=0;i<childNodes.length;i++)

                {

                    showChildNode(childNodes[i]);

                }

            }

            function showChildNode(node_)

            {

              var para=document.createElement("p");

              var node=document.createTextNode("[nodeName is : "+node_.nodeName+"],[nodeType is : "+node_.nodeType+"]");

              para.appendChild(node);

              var element=document.getElementById("showDiv");

              element.appendChild(para);

            }

        </script>

    </head>

    <body onload="showChildNodes()">

        <div id="parentDiv">

            <div id="childDiv1">child div 1</div>

            <div id="childDiv2">child div 2</div>

            <div id="childDiv3">child div 3</div>

        </div>

        <div id="showDiv"></div>

    </body>

</html>

  

   1-1：FF下的运行结果如下：

   

   1-2：IE下的运行结果如下：

2：简单的测试代码段二

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test childNodes</title>

        <script>

            function showChildNodes()

            {

                var parentDiv=document.getElementById("parentDiv");

                var childNodes=parentDiv.childNodes;

                for(var i=0;i<childNodes.length;i++)

                {

                    showChildNode(childNodes[i]);

                }

            }

            function showChildNode(node_)

            {

              var para=document.createElement("p");

              var node=document.createTextNode("[nodeName is : "+node_.nodeName+"],[nodeType is : "+node_.nodeType+"]");

              para.appendChild(node);

              var element=document.getElementById("showDiv");

              element.appendChild(para);

            }

        </script>

    </head>

    <body onload="showChildNodes()">

        <div id="parentDiv"><div id="childDiv1">child div 1</div><div id="childDiv2">childdiv 2</div><div id="childDiv3">child div 3</div></div>

        <div id="showDiv"></div>

    </body>

</html>

  

2-1：FF下的运行结果如下：

   2-2：IE下的运行结果如下：

嗯，看过上面的代码段及其运行结果，应该不言自明了，随便也测试了一下Chrome和Opera他们的运行效果和FF是一样的！

嗯，现象我们明确了，不过原因是什么呢？

网上查看了一些资料，针对这个问题主要是这样的：

1）IE是将一个完整标签作为一个节点。

2）FF是除了将一个完整的标签作为一个节点外，也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容（除注释外，包括任何的文字、空格、回车、制表符）也算是一个节点了。而且这种节点也有它们自己独特的属性和值－－nodeName="#text"。

3：简单的测试代码段三

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test childNodes</title>

        <script>

            function showChildNodes()

            {

                var parentDiv=document.getElementById("parentDiv");

                var childNodes=parentDiv.childNodes;

                for(var i=0;i<childNodes.length;i++)

                {

                    showChildNode(i,childNodes[i]);

                }

            }

            function showChildNode(index,node_)

            {

              var para=document.createElement("p");

              var node=document.createTextNode(index+"=[nodeName is : "+node_.nodeName+"],[nodeType is : "+node_.nodeType+"]");

              para.appendChild(node);

              var element=document.getElementById("showDiv");

              element.appendChild(para);

            }

        </script>

    </head>

    <body onload="showChildNodes()">

        <div id="parentDiv"><!--hello world--><div id="childDiv1">注释</div>hello world<div id="childDiv2">文字</div>   <div id="childDiv3">空格</div>

<div id="childDiv4">回车换行</div>        <div id="childDiv5">制表符</div></div>

        <div id="showDiv"></div>

    </body>

</html>

   3-1：IE下运行的结果如下（注意：经自己动手实验表明文字对于IE也是一个节点）：

   3-2：FF/Chrome/Opera下的运行结果如下：

找到问题差不多就解决了一半的问题，针对以上的问题解决的思路有好多种，我的建议是：

1：通过节点的名称nodeName或者nodeType过滤出自己想要的节点，比如针对上面简单的代码，我们只想要DIV标签子节点，通过一个循环重新组装一个集合就可以了，并且可以实现浏览器的兼容性（注意是部分代码，比较简单就不写全了）

            function showChildNodes()

            {

                var parentDiv=document.getElementById("parentDiv");

                var childNodes=parentDiv.childNodes;

                var array=new Array();

                for(var j=0,k=0;j<childNodes.length;j++)

                {

                   if(childNodes[j].nodeName=="DIV")

                   {

                      array[k++]=childNodes[j];

                   }

                }

                for(var i=0;i<array.length;i++)

                {

                    showChildNode(i,array[i]);

                }

            }

2：遍历的时候通过nodeName或者nodeType过滤掉自己不要想的节点，比如：在for循环时加上

 if(childNodes[i].nodeName=="#text") continue;

3：使用其他替代的方法，比如：node.getElementsByTagName()方法或者getElementsByClassName()方法

附录（判断节点类型的常用方式）：

图一：节点类型值和名称常量的对应关系

图二：不同节点的类型值

图三：节点类型、节点名称及其对应的节点返回值

childNodes在IE与Firefox中的区别的更多相关文章

  1. js中== 和===中的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. continue语句在for语句和while语句中的区别

    while语句的形式: while( expression ) statement for语句的形式: for( expression1; expression2;expression3 )   // ...

  3. table中bordercolor属性设置后最新ie浏览器或firefox中不显示边线，借助table的css来实现边线

    table中的bordercolor属性设置后在最新的ie或者firefox中均不显示边线,table的边线又是常用功能.只能使用css来实现了,更通用,更方便一些. css: ​.ctable{ b ...

  4. Objective-C声明在头文件和实现文件中的区别

    Objective-C声明在头文件和实现文件中的区别 转自codecloud(有整理) 调试程序的时候,突然想到这个问题,百度一下发现有不少这方面的问答,粗略总结一下: 属性写在.h文件中和在.m文件 ...

  5. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  6. firefox中 checkbox属性checked="checked"已有，但复选框却不显示打钩的原因

    最近在调试复选框的应用,在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题. 复选框绑定了click事件,点一次选中,再点击取消选中,依次类推.这个功能在ie中没问题,但是在firefox ...

  7. Ajax请求在IE和Google Chrome中可以响应，在Firefox中无法响应

    在工作中碰到这么一个问题,发送ajax请求,在IE和chrome中可以正常的响应,但是在Firefox中无法响应,代码如下: JS代码: function Sure(obj) { var statu ...

  8. firefox 中碰到的一个小坑

    情况描述: 在一个处于正常文档流的div中,里面有一部分文字,还有个有浮动的块, 上代码 HTML: <div class="container">   this is ...

  9. 在Firefox中通过AJAX跨域访问Web资源---

    一.解决在firefox中无法跨域访问的问题 AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息.至于成功接收到响应信息后的操作,就和普通的Web客 ...

随机推荐

  1. CF #365 (Div. 2) D - Mishka and Interesting sum 离线树状数组（转）

    转载自:http://www.cnblogs.com/icode-girl/p/5744409.html 题目链接:CF #365 (Div. 2) D - Mishka and Interestin ...

  2. openmp并行计算

    #include <omp.h>#include <stdio.h>#include <stdlib.h> void test(int n){ for (int i ...

  3. SecureCRT 的安装和注册

    基本信息:win764位 准备: 下载软件包:scrt70-x86.exe,和SecureCRT.7.3.keygen.exe注册机 下载地址:http://download.csdn.net/det ...

  4. EF下CodeFirst、DBFirst与ModelFirst分析

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first:1.Database First是基于已存在的数据库,利用某些工具(如Vs ...

  5. .Net中Math.Round与四舍五入

    有不少人误将Math.Round函数当作四舍五入函数在处理, 结果往往不正确, 实际上Math.Round采用的是国际通行的是 Banker 舍入法. Banker's rounding(银行家舍入) ...

  6. JAVA中集合类的使用

    总的说来常用的集合类有两大类:Collection 和 Map 1) Collection接口有List和Set两大类子接口,List有ArrayList.LinkedList.Vector子类,Se ...

  7. java异常处理机制throws

    throws可以在方法声明时抛出的异常.原则上throws声明的异常,一定要在该方法中抛出,否则没有意义. 相反的,若方法中我们主动通过throw抛出一个异常,应该在throws中声明该种类异常,通知 ...

  8. js判断手机是的操作系统

    var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...

  9. Angularjs过滤器的开发.

    先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...

  10. Adobe AIR socket complicating 导致 socket RST

    基于socket实现HTTP协议 并发请求AB,A为HTTP请求,B为socket请求. A的请求服务器返回数据很短,包体长度只有35,且客户端收到包头后就断开连接,同时A连接的服务器也断开了连接, ...