js-封装自己的class类

109 阅读 0 评论 72 点赞

我是靠谱客的博主要减肥云朵，最近开发中收集的这篇文章主要介绍js-封装自己的class类，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

封装自己的class类，对于高版本浏览器，支持document.getElementsByClassName，对于IE678,不支持的情况要进行处理。首先判断是否支持，不支持再进行如下处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script>    

    </script>
</head>
<body>
    <div class="test  "></div>
    <div class="test11 www"></div>
    <div class="asdf  test   www"></div>
    <div id="divId">
        <div class="test  "></div>
        <div class="www"></div>
    </div>
    <script>
        /*封装自己的class类,id为父元素id*/
        function getClass(id,className){ 
            if(document.getElementsByClassName){ //判断浏览器是否支持
                if(id){ //判断是否有父元素id
                    var elem = document.getElementById(id);
                    return elem.getElementsByClassName(className);
                }else{
                    return document.getElementsByClassName(className);
                }
            }
            else{
                if(id){
                    var elem = document.getElementById(id);
                    var dom = elem.getElementsByTagName("*");
                }else{
                    var dom = document.getElementsByTagName("*");
                }
                var arr = [];   //存放满足类名的对象
                for(var i = 0;i<dom.length;i++){
                    if(isContain(dom[i].className,className)){
                        arr.push(dom[i]);
                    }
                }
                return arr;
            }
        }
        function isContain(str,className){//判断str是否包含className
            var flag = false;
            var txtArr = str.split(" ");
            for(var i=0; i<txtArr.length; i++){
                if(txtArr[i] == className)
                    return true;
            }
            return false;
        }
         console.log(getClass("divId",'test').length);
         console.log(getClass("",'test').length);
    </script>

</body>
</html>