JavaScript判断DOM元素是否包含指定class的三种方法
作者:微光时间:2026-10-21 21:52:00浏览:163
本文介绍在JavaScript中判断DOM元素是否包含特定class的三种实现方式。首先展示jQuery的hasClass方法,接着解析其底层源码逻辑,包括处理分隔符和边界匹配。随后介绍原生JS的indexOf字符串匹配方案,并指出其局限性。最后推荐HTML5的classList.contains方法,并提供兼容旧浏览器的polyfill实现,帮助开发者根据实际需求选择合适方案。
判断DOM元素是否包含指定class的方法
举例说明:
<html class="no-js">
<head>
</head>
<body>
</body>
</html>
检测HTML元素的class属性中是否包含no-js。
jQuery实现方式
方法一:使用jQuery实现
$("html").hasClass('no-js');
参考jQuery源码的hasClass实现逻辑:
var rclass = /[\t\r\n\f]/g;
jQuery.fn.extend({
hasClass: function(selector) {
var className = " " + selector + " ",
i = 0,
l = this.length;
for (; i < l; i++) {
if (this[i].nodeType === 1 &&
(" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) {
return true;
}
}
return false;
}
})
原生JavaScript实现
方法二:原生JavaScript实现
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');
HTML5 classList API
方法三:利用HTML5的classList API
注意事项:
- 字符串的indexOf方法无法精确匹配.no-js和.no-js-inde这类类名;
- 类名之间的分隔符可能包含\t等空白字符。
具体代码示例:
var hasClass = (function(){
var div = document.createElement("div") ;
if( "classList" in div && typeof div.classList.contains === "function" ) {
return function(elem, className){
return elem.classList.contains(className) ;
} ;
} else {
return function(elem, className){
var classes = elem.className.split(/\s+/) ;
for(var i= 0 ; i < classes.length ; i ++) {
if( classes[i] === className ) {
return true ;
}
}
return false ;
} ;
}
})() ;
alert( hasClass(document.documentElement, "no-js") ) ;
以上内容旨在为读者提供学习或工作参考,感谢支持!
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
