【深入JavaScript】DOM中childNodes在IE和非IE浏览器中的区别

题外话:这问题遇到好多遍,每次都不记得怎么解决,这次写下来好好提醒自己。

一、问题的出现

  在写原生Javascript时,我们会经常使用getElementsByTagName()和childNodes来实现对节点的遍历,但是getElementsByTagName()对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构。

  但是在跨浏览器开发中,问题就出现了:

<html>
<head></head>

<body onload="check();">

   <!--第一个要遍历的div,节点之间留有空格和回车-->
    <div id="firDiv">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    </div>

    <!--第二个要遍历的div,节点间无空格回车-->
    <div id="secDiv"><div>first</div><div>second</div><div>third</div></div>

    <script type="text/javascript">
        function check(){
            var childs1=$('firDiv').childNodes;
            var childs2=$('secDiv').childNodes;  
        
            alert("length of First Div: "+childs1.length+" , length of Second Div: "+childs2.length);
    }

        var $=function(id){ 
            return document.getElementById(id);
        }
    </script>
</body>
</html>

亲测后发现,用IE运行的结果是是3,3,而用Firefox、Chrome、Safari和Opera运行的结果则是7,3。

咦,怎么会有这种情况?

 

二、问题的根源

在结构上,div1和div2不同的地方在于,div1的子节点间有回车或者空格,而对象2则是一行写到尾。

造成不一致的原因就在于这:

IE是将一个完整标签作为一个节点。

而Firefox等浏览器除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回车、制表符)也算是一个节点,而且这种节点也有它们自己独特的属性和值:nodeName="#text"。

 

三、解决方法

在非IE内核的浏览器上使用childNodes遍历子节点时,将这些多余的节点过滤掉即可。

比如在for循环里加上:

if(childNode.nodeName=="#text") continue;

(或者是检测节点的类型)

这样便跳过这些多余的节点,使程序运行的更有效率。

你可能感兴趣的:(JavaScript)