封装class类--分割类名后 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script>
        window.onload=function()
        {
            function getclass(classname)
            {
                if(document.getElementsByClassName)
                {
                    return document.getElementsByClassName(classname);
                }

                var dom=document.getElementsByTagName("*");    
                var arr=[];
                for(var i=0;i<dom.length;i++)
                {
                    var fengehou=dom[i].className.split(" ");   //把所有盒子的类名（字符串）分割并且转换成数组（fenggehou[])
                    for(var j=0;j<fengehou.length;i++)  //遍历分割后的数组
                    {
                        if(fengehou[j].className==classname)
                        {
                            arr.push(dom[i]);  //如果分割后的数组中的元素的类名和classname一致，就把这个元素所在的分割前的盒子放到arr[]数组中，计算分割前包含classname的盒子数量
                        }
                    }
                }
                return arr;
            }

            console.log(getclass("demo").length); //结果是3(通过类名找元素)
        }
    </script>
</head>
<body>
<div class="demo"></div>
<div class="text"></div>
<div></div>
<div class="demo"></div>
<div></div>
<div></div>
<div class="demo text"></div>
<div></div>
<div></div>
<div class="text one two"></div>
</body>
</html>

　　

posted @ 2019-07-17 19:14  shanlu  阅读(162)  评论(0)    收藏  举报