JavaScript 获取 DOM 元素 class 的两种实现方式
作者:小圆点时间:2026-10-28 22:04:38浏览:197
本文介绍在 JavaScript 中获取具有特定 class 的 DOM 元素的方法。主要利用 getElementsByClassName 方法,并针对不支持该方法的旧版浏览器提供通过 getElementsByTagName 遍历判断的兼容方案,确保代码在不同环境下的可用性。
JavaScript 获取 DOM 元素 class 的两种实现方式
本文详细介绍如何使用 JavaScript 获取 DOM 元素中指定 class 的实现方法,供读者参考。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function getClass(node,classname) {
if(node.getElementsByClassName) {
return node.getElementsByClassName(classname);
//如果存在该标签 就返回
} else {
var elems = node.getElementsByTagName(node),
defualt = [];
for (var i = 0; i < elems.length; i++) {
//遍历所有标签
if(elems[i].className.indexOf(classname) != -1) {
//查找相应类名的标签
defualt[defualt.length] = elems[i];
}
}
return defualt;
}
}
window.onload = function () {
var text = document.getElementById('text'),
cs = getClass(text,'cs');
document.write(cs.innerHTML='cs');
}
</script>
</head>
<body>
<div id="text"><div class="cs">textcss</div></div>
</body>
</html>
希望上述内容对您的 JavaScript 编程实践有所帮助。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
