• 封装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>
    

      

  • 相关阅读:
    Day01 基本SQL SELECT
    Java IO流
    排序: 选择排序
    Java的数据存储机制
    Java反射基础笔记
    学习面向对象的三条主线之三 面向对象的三大特征 关键字
    学习面向对象的三条主线之二 面向对象的三大特征
    Oracle数据库知识积累
    office技巧
    如何读书
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11203100.html
Copyright © 2020-2023  润新知