乏mily

导航

IE和火狐 差异

1、JavaScript中

  1)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 onload="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!");

posted on 2013-10-28 17:18  乏mily  阅读(255)  评论(0编辑  收藏  举报