嗯，这是前几天写一个遍历双层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. 在html中添加缩放meta

    见代码(html) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...

  2. Codeforces Round #364 (Div. 2) Cards

    Cards 题意: 给你n个牌,n是偶数,要你把这些牌分给n/2个人,并且让每个人的牌加起来相等. 题解: 这题我做的时候,最先想到的是模拟,之后码了一会,发现有些麻烦,就想别的方法.之后发现只要把它 ...

  3. python （18）在linux中如何实现定时发送邮件

    最近要用到,定时发送邮件功能: 如何定时,当然要用到linux中crontab了 如下的代码能够定时发送邮件 #!/usr/bin/env python # -*- coding=utf-8 -*- ...

  4. 使用oschina的git服务器

    初始配置 用注册的用户名和邮箱配置git config,这个信息不一定是你在网站注册的内容. git config --global user.name "" git config ...

  5. NPOI格式设置

    using NPOI.SS.UserModel; using NPOI.HSSF.UserModel; //创建Execl IWorkbook hssfworkbook =new HSSFWorkbo ...

  6. java中treemap和treeset实现（红黑树）

    java中treemap和treeset实现(红黑树)   TreeMap 的实现就是红黑树数据结构,也就说是一棵自平衡的排序二叉树,这样就可以保证当需要快速检索指定节点. TreeSet 和 Tre ...

  7. A+B问题 涉及EOF

    输入将包括一系列对的整数a和b,通过一空间,一对每行整数分离的.  产量 对于每对输入的整数a和b你应该输出的a和b的总和在一行,并用输出的一个行中输入每一行.  样本输入 1 5  2 3  样本输 ...

  8. ylbtech-Unitity-cs:传递的字符串中数字字符的数目

    ylbtech-Unitity-cs:传递的字符串中数字字符的数目 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, using System; namespace Functions ...

  9. viewpage广告条的制作

    package com.itheima27.viewpagerdemo; import java.util.ArrayList; import java.util.List; import andro ...

  10. JQuery之DataTables强大的表格解决方案

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...