用原生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
属性是否包含指定的类名。如果包含,则将该元素添加到结果数组中。最后,返回找到的元素数组。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律