用原生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
属性是否包含指定的类名。如果包含,则将该元素添加到结果数组中。最后,返回找到的元素数组。