IE和FireFox中的childNodes区别!!

最新推荐文章于 2021-05-18 15:44:35 发布

AloysDang

最新推荐文章于 2021-05-18 15:44:35 发布

阅读量1.6k

点赞数

7. childNodes获取的节点

【分析说明】childNodes的下标的含义在IE和Firefox中不同，看一下下面的代码：

<ul id="main">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<input type=button value="click me!" onclick=

"alert(document.getElementById('main').childNodes.length)" >

分别用IE和Firefox运行，IE的结果是3，而Firefox则是7。Firefox使用DOM规范，"#text"表示文本（实际是无意义的空格和换行等）在Firefox里也会被解析成一个节点，在IE里只有有实际意义的文本才会解析成"#text"。

【兼容处理】

方法一，获取子节点时，可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构。

方法二，在实际运用中，Firefox在遍历子节点时，不妨在for循环里加上：

  
  
   
   if
   
   (childNode.nodeName
   
   =="
   
   #text
   
   "
   
   ) 
   
   continue
   
   ;
   
   //
   
   或者使用nodeType == 1。

这样可以跳过一些文本节点。

延伸阅读

　　《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 οnlοad="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!");
=================================================================

.trim()

 //获取 select 下拉列表框  选中的值
        function test()
        {
             var tab=document.getElementById("tabMain");
            var text="";
            for(var i=1;i<tab.rows.length;i++)
            {
                if(tab.rows[i].cells[7].childNodes[0].options[tab.rows[i].cells[7].childNodes[0].selectedIndex].text!="默认")
  {
   text=tab.rows[i].cells[7].childNodes[0].options[tab.rows[i].cells[7].childNodes[0].selectedIndex].text;
   alert(text);
  }
            }
        }