js--封装类名的dom操作

dom操作中的getElementByClassName()在ie6、7、8中具有兼容性问题,而在高级浏览器中就不存在这种问题。以下通过代码对getElementByClassName()的封装 。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function(){
            console.log(getClass("test").length);
        }
        function getClass(className){
            //如果浏览器支持着,则直接返回
            if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }
            //不支持的浏览器
            var  arr = [];
            var dom = document.getElementsByTagName("*");

            for(var i=0; i < dom.length; i++){
//                if(dom[i].className == className){
//                    arr.push(dom[i]);
//                }i
                //改进后的class

                var  txt = dom[i].split(" ");//["dome","test"]
                for(var j=0; j < txt.length; j++){
                    if(txt[j] == className){
                        arr.push(dom[i]);
                    }
                }
            }
            return arr;
        }

        /*
        原理,遍历所有的div。通过每个div的className来判断
         */
    </script>
</head>
<body>

</body>
<div class="dome"></div>
<div></div>
<div class="test"></div>
<div></div>
<div class="dome test"></div>
<div></div>
<div></div>
<div></div>
<div class="dome"></div>
<div></div>
</html>

  

posted @ 2017-09-04 00:18  _江江江江  阅读(230)  评论(0编辑  收藏  举报