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

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

weixin_30328063

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

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/stay-foolish/archive/2013/05/08/3066447.html

版权

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

一、问题的出现

　　在写原生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>