class类的封装

最新推荐文章于 2022-08-17 19:49:47 发布

kumayato

最新推荐文章于 2022-08-17 19:49:47 发布

阅读量782

点赞数

分类专栏： JavaScript-demo 文章标签： class

本文链接：https://blog.csdn.net/kumayato/article/details/71631980

版权

JavaScript-demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

目的：解决了浏览器对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>

kumayato

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
class类的封装

目的：解决了浏览器对document.getElementsByClassName()的兼容问题。思维导图：代码：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ fun
复制链接

扫一扫