用原生js实现类似getElementsByClassName的方法,不能使用querySelectorAll

要使用原生 JavaScript 实现一个类似 getElementsByClassName 的方法,并且不使用 querySelectorAll,你可以通过遍历 DOM 树并检查每个元素的 className 属性来实现。以下是一个简单的实现示例:

function getElementsByClassName(className, node) {
    var result = []; // 存储找到的元素的数组
    if (!node) {
        node = document.body; // 如果没有指定节点,则从 body 开始搜索
    }

    // 检查当前节点的类名是否包含指定的类名
    function hasClassName(el, name) {
        var reg = new RegExp('(^|\\s)' + name + '(\\s|$)');
        return reg.test(el.className);
    }

    // 递归遍历 DOM 树
    function traverse(node) {
        if (node.nodeType === 1 && hasClassName(node, className)) {
            result.push(node); // 如果节点是元素节点且类名匹配,则添加到结果数组中
        }
        var children = node.children; // 获取当前节点的所有子节点
        for (var i = 0; i < children.length; i++) {
            traverse(children[i]); // 递归遍历每个子节点
        }
    }

    traverse(node); // 从指定的节点开始遍历
    return result; // 返回找到的元素数组
}

使用示例:

var elements = getElementsByClassName('my-class'); // 查找类名为 'my-class' 的所有元素
console.log(elements); // 输出找到的元素数组

这个实现会遍历从指定节点(或 document.body)开始的所有 DOM 树,并检查每个元素节点的 className 属性是否包含指定的类名。如果包含,则将该元素添加到结果数组中。最后,返回找到的元素数组。

posted @   王铁柱6  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示