嗯，这是前几天写一个遍历双层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. QueryRunner的API

    org.apache.commons.dbutils Class QueryRunner java.lang.Object org.apache.commons.dbutils.AbstractQue ...

  2. 【转】 远程到服务器安装visualSVN server，出现Service 'VisualSVN Server' failed to start的解决方法

    在帮助远程到服务器上安装visualSVN server的时候,出现Service 'VisualSVN Server' failed to start. 解决方法(先不要关闭安装弹出的错误窗口): ...

  3. 返回顶部(解决IE6固定定位)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 黄聪：如何阻止iframe里引用的网页自动跳转

    今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...

  5. 3. c的输入输出

    putchar与getchar操作输入输出通道 #include <stdio.h> #include <ctype.h> main(){ int c; while((c = ...

  6. sublime代码片段功能

    tools - > developer - > new snippet有了这个,你就可以通过iu这两个键,直接弄出自己的模板了,这就很方便了,不用在复制粘贴了.上是代码模板,下面是快捷键, ...

  7. HDU 2089 不要62（数位dp入门）

    题意:统计区间 [a,b] 中不含 4 和 62 的数字有多少个. 题解:这是数位DP的入门题了,首先要理解数DP的原理,DP[i][j]:代表第i位的第j值,举个栗子:如4715   数位数是从右向 ...

  8. NeHe OpenGL教程 第四十三课：FreeType库

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. SCREAM:Error suppression ignored for

    wamp报错SCREAM:Error suppression ignored for 问题:SCREAM:Error suppression ignored for 解决: 在php.ini最下面加入 ...

  10. spring外部化配置

    例如 <bean id="dataSource" class="....." p:username="aa" p:password=& ...