class类的封装

来源:互联网 发布:数据流量关闭跑流量 编辑:程序博客网 时间:2024/06/06 09:46

目的 : 解决了浏览器对document.getElementsByClassName()的兼容问题。

思维导图:

这里写图片描述

代码:

<!DOCTYPE html><head>    <meta charset="UTF-8">    <title>Document</title>    <script>        window.onload = function(){            function getClass(classname,id)            {                //浏览器支持的                if(document.getElementsByClassName)                {                    //有id的                    if(id)                    {                        var seleid = document.getElementById(id);                        return seleid.getElementsByClassName(classname);                    }                    else //没有id                    {                        return document.getElementsByClassName(classname) ;                    }                }                //浏览器不支持的                //有id的                if(id)                {                    var seleid = document.getElementById(id);                    var dom = seleid.getElementsByTagName("*");                }                else //没有id的                {                    var dom = document.getElementsByTagName("*");                }                var arr = [];                for(var i=0; i<dom.length; i++)                {                    var txtarr = dom[i].className.split(" ");                     //把类名转化成了txt这个数组,用于分割类名。                    for(var j=0; j<txtarr.length; j++)                    {                       if(txtarr[j] == classname)                       {                           arr.push(dom[i]);                            //我们要的是含有该classname的元素节点                       }                    }                }                return arr;            }            console.log(getClass("one","current").length); // 1        }    </script></head><body><div class="one"></div><div class="one"></div><div id="current">    <div class='one'></div>    <div class='two'></div></div><div class='two'></div></body></html>
0 0
原创粉丝点击