嗯，这是前几天写一个遍历双层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. routeros的配置资料

    http://blog.csdn.net/boliang319/article/details/41800261 http://blog.csdn.net/boliang319/article/det ...

  2. svn 同步脚本

    REPOS="$1"REV="$2"export LANG=en_US.UTF-8/usr/bin/svn update /home/wwwroot/yswif ...

  3. 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:20160928' did not find a matching property

    控制台看到如下警告: 症状原因: 在eclipse配置好的tomcat服务器上双击,打开tomcat服务器的配置界面.按如下操作配置服务器:在Server Options勾上的选项,会在你部署web项 ...

  4. Makefile所有内嵌函数

    一.文本处理函数以下是GNU make内嵌的文本(字符串)处理函数.1       $(subst FROM,TO,TEXT) 函数名称:字符串替换函数—subst. 函数功能:把字串“TEXT”中的 ...

  5. c++ 迭代器库

    来自http://zh.cppreference.com/w/cpp/iterator 迭代器库提供了5种迭代器的定义,同时还提供了迭代器特征.适配器及其相关的工具函数. 迭代器共有5种:InputI ...

  6. 【原】C# decimal字符串转成整数

    第一种方法: string na="1000.53"; int a=int.Parse(na.Substring(0,na.IndexOf('.')));//返回值a=1000 第 ...

  7. PLSQL_闪回操作1_Flashback Query

    2014-07-02 Created By BaoXinjian

  8. KMP算法的Next数组详解 转

    这个写的很好,还有讲kmp,值得一看. http://www.cnblogs.com/tangzhengyue/p/4315393.html 转载请注明来源,并包含相关链接. 网上有很多讲解KMP算法 ...

  9. c#unity

    using UnityEngine;using System.Collections; public class PacmanMove : MonoBehaviour { public float s ...

  10. jQuery-ajax: 取消关注|关注

    ylbtech-jQuery-ajax: 取消关注|关注 1.A,jQuery-效果图返回顶部   1.B,jQuery-Source Code(源代码)返回顶部 <script src=&qu ...