JavaScript判断DOM是否含有class

最新推荐文章于 2023-01-20 11:12:04 发布

原创最新推荐文章于 2023-01-20 11:12:04 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍三种判断DOM元素是否包含特定class的方法：使用jQuery的hasClass函数、纯JavaScript实现及利用HTML5的classList API。每种方法都有详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍了如何用javascript判断dom是否有存在某class的值。具有很好的参考价值，下面跟着小编一起来看下吧
例如：

<html>
<head>
</head>
<body>
	<div class="bg img" id="app">
		<p class="aaa"></p>
	</div>
</body>
</html>

判断html节点的class是否有no-js。
1. jquery的实现方式
$(".img").hasClass(‘bg’);
jquery源码的实现方式：
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;
}
})
2. js的实现方式
function hasClass(element, cls) {
return (’ ’ + element.className + ’ ‘).indexOf(’ ’ + cls + ’ ') > -1;
}
console.log(hasClass(document.querySelector(”.img”), ‘bg’))
3. H5的classList
说明下：
字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类；类名的分隔符可能不是空格，还有可能是\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.querySelector(".img"), "bg"));

结果：
在这里插入图片描述