js 教你怎么封装例如如何封装getElementsByClassName()方法

最新推荐文章于 2019-06-25 10:39:22 发布

waterDjj

最新推荐文章于 2019-06-25 10:39:22 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/waterDjj/article/details/52224838

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我的爱人</div>
<div class="myClass">div</div>
<p class="myClass" id="myClass">p</p>
</body>
<script>
    function getClass(className){
        var bqAll=document.getElementsByClassName;
        if(bqAll){
            return document.getElementsByClassName(className)
        }
        var arr=[];
        var dom=document.getElementsByTagName("*");
        for(var i=0;i<dom.length;i++){
           var classArray=dom[i].className.split(" ");
            for(var j=0;j<classArray.length;j++){
                if(classArray[j]==className){
                    arr.push(dom[i]);
                }
            }
        }
        return arr;
    }
    function $(str){
        var s=str.charAt(0);//存放符号
        var ss=str.substr(1);//存放元素的id名或类名
        switch(s){
            case "#":
                    alert("封装");
                   return document.getElementById(ss);
                break;
            case ".":
                alert("类="+document.getElementsByClassName(ss)[0]);
                    return document.getElementsByClassName(ss)[0];
                break;
            default:
                    alert("str="+document.getElementsByTagName(str)[0]);
                return document.getElementsByTagName(str)[0];
        }
    }
//    $("p").innerHTML="我的p元素";
//    $("#myClass").style.backgroundColor="red";
    $(".myClass").style.color="blue";
</script>
</html>

waterDjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 教你怎么封装例如如何封装getElementsByClassName()方法

Title我的爱人divp function getClass(className){ var bqAll=document.getElementsByClassName; if(bqAll){ return document.getElementsByClassName(className) }
复制链接

扫一扫