自定义getElementsbyClassName(封装)

最新推荐文章于 2022-11-19 11:02:57 发布

sweetllh

最新推荐文章于 2022-11-19 11:02:57 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/70336501

javascript 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一个自定义的JavaScript工具库，包括样式属性的设置与获取功能及兼容低版本IE的getElementsByClassName方法。通过具体代码示例展示了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript

/**
 * 这是一个自定义的js工具库
 * @author llh
 * @date 2017/4/19
 * @version 0.0.1
 */

/**
 * 实现标签对象的样式属性设置或获取
 * @param object            需要使用的标签对象(标签对象指的是使用类似document.getElementById得到的结果)
 * @param attribute         我们需要操作的样式属性
 * @param value             如果是重新设置需要提供这个内容，表示把这个内容设置到样式里
 */
function css(object, attribute, value){
    // 在js里函数虽然声明参数，但实际调用过程中可以不提供参数或不提供完整的参数，所以虽要使用arguments判断调用者
    // 传递了多少个参数
    if(arguments.length == 2){ // 获取
        if(object.currentStyle){    // IE浏览器
            //object.currentStyle.width;
            return object.currentStyle[attribute];
        }else{
            return getComputedStyle(object, false)[attribute];
        }
    }else if(arguments.length == 3){ // 设置
        object.style[attribute] = value;// 不能用currentStyle.attribute否则js会认为是调用
                                        // currentStyle里的attribute属性
    }
}

/**
 * 兼容低版本IE实现getElementsByClassName的元素查找
 * @param {Object} className        需要查找的类样式名称
 */
function getElementsByClassName(className){
    var aResult = [];       //保持查找到所有结果

    // 1. 获取DOM树里所有的标签
    var aElements = document.getElementsByTagName('*');
    // 2. 遍历上一步的结果
    var aClassNames;
    for (var i=0,length=aElements.length; i<length; i++){
        // 3. 获取每一个元素的class属性

        // 3.1 判断元素是否有class属性
        if (aElements[i].className){
            aClassNames = aElements[i].className;
            aClassNames = aClassNames.split(' ');   // 处理一个class使用多个类选择器
            //aElements.getAttribute('class')
            // 4. 迭代aClassNames获取每一个类选择器
            for (var j=0,len=aClassNames.length; j<len; j++){
                // 5. 比较class属性的内容是否和参数的内容一致
                if (aClassNames[j] == className){
                    // 5. 如果是一致的，把元素放到aResult
                    aResult.push(aElements[i]);
                    // 6. 如果已经找到符合的内容，后面的就不需要再做检查
                    break;
                }
            }
        }
    }


    return aResult;
}

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义getElementsbyClassName</title>
    </head>
    <body>
<div class="div1">
    <ul class="ul1">
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
    </ul>
    <ul class="ul1">
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
    </ul>
</div>
<div class="div1">
    <ul class="ul1">
        <li class="li1 li1-1 li1-2"></li>
        <li class="li2"></li>
        <li class="li3"></li>
    </ul>
    <ul class="ul1">
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
    </ul>
</div>
    </body>
<script type="text/javascript" src="js/utils.js" ></script>
<script>
    var ary = getElementsByClassName('li1');
//  alert(ary.length);
</script>
</html>