JavaScript 实现获取 DOM 元素 Class 的兼容方法
发布时间：2026-10-14 |
4人浏览过
本文提供一段使用纯 JavaScript 获取包含指定 class 元素的代码示例。核心逻辑依赖于 getElementsByClassName 方法，同时针对不支持该方法的旧版浏览器补充了基于 getElementsByTagName 和字符串匹配的回退方案。
功能与目标
在网页开发中，通常需要筛选出文档内带有特定 CSS 类名的所有标签。为了增强兼容性，这段脚本封装了一个名为 getClass 的函数：
- 现代支持环境：优先调用标准的
node.getElementsByClassName(classname)。 - 老旧浏览器兼容：当上述 API 不存在时（如 IE8 及以下版本），通过获取节点下所有子元素并进行逐层
indexOf类名比对来返回匹配列表。
准备条件
- 确认页面处于 HTML 标准结构。
- 存在一个带有
id="text"的外层容器，内部包裹需要查找样式的<div>或其他标签。
第1步：引入封装好的 JS 函数
在页面的 <head> 部分定义以下辅助函数。注意，原始代码中存在语法笔误（`getElementsByTagName(node)` 缺少 tagName 参数，默认传入了节点本身），为了保证代码能真正跑通且不报错，下面保留了其兼容判断框架，但修正了核心遍历逻辑以符合实际执行需求。
// 定义兼容性的 class 获取方法
function getClass(node, classname) {
// 1. 如果当前环境支持标准的 getElementsByClassName
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
}
// 2. 否则采用兼容方案：获取 node 下所有标签逐一检查
else {
// 注意：原稿此处为 getElementsByTagName(node) 是不合法的，应改为 '*' 或具体标签
var elems = node.getElementsByTagName('*'),
defualt = []; // 存储结果的数组
for (var i = 0; i < elems.length; i++) {
// 检查 className 是否包含目标类名（需考虑空格隔离）
if (elems[i].className && elems[i].className.indexOf(classname) != -1) {
defualt[defualt.length] = elems[i];
}
}
return defualt;
}
}
第2步：编写触发时机与测试用例
将页面加载完成后执行的逻辑写入 window.onload 回调中。通过 `document.getElementById` 定位父节点，并传入需要查找的 class 名称。
window.onload = function () {
var text = document.getElementById('text'),
cs = getClass(text, 'cs'); // 获取 id=本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
