如何用js判断dom是否有存在某class的值

在进行网页开发时，我们经常需要判断某个DOM元素是否含有特定的类名。本文将介绍几种不同的方法来实现这一功能，包括使用jQuery、纯JavaScript以及HTML5的classList。

一、HTML示例

让我们看一个HTML示例：

```html

```

我们的任务是判断html节点的class是否包含'no-js'。

二、使用jQuery实现

对于使用jQuery的开发者来说，判断元素是否含有特定类名非常简单。以下是使用jQuery实现的代码：

```javascript

$("html").hasClass('no-js');

```

这是jQuery源码中的一个简单实现方式：

```javascript

var rclass = /[\t\r\f]/g; // 正则表达式用于匹配空格以外的字符，以便正确处理类名中的空格。

jQuery.fn.extend({ // 扩展jQuery的原型，添加新的方法。

hasClass: function(selector) { // 添加一个名为hasClass的方法，用于判断元素是否含有特定的类名。

var className = " " + selector + " "; // 将类名包裹在空格中，便于后续的字符串匹配操作。

var i = 0, l = this.length; // 遍历元素的索引和长度。

for (; i < l; i++) { // 遍历每个元素。

if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ")dexOf(className) > -1) { // 判断元素是否是HTML节点（即nodeType为1），并检查其类名是否包含给定的类名。如果包含则返回true。

return true; // 返回true表示元素含有特定的类名。

}

}

return false; // 如果所有元素都不含有特定的类名，则返回false。

}

});

```

三、使用纯JavaScript实现

不使用jQuery，我们也可以使用纯JavaScript来实现这个功能：

```javascript

function hasClass(element, cls) { // 判断元素是否含有特定的类名。如果包含则返回true，否则返回false。

return (' ' + element.className + ' ')dexOf(' ' + cls + ' ') > -1;

}

hasClass(document.querySelector("html"), 'no-js'); // 使用该函数判断html元素是否含有类名'no-js'。

```四、使用HTML5的classList实现：虽然字符串的indexOf方法在某些情况下可能无法正确区分类名（例如'.no-js'和'.no-js-indeed'），但HTML5的classList提供了一种更可靠的方式来处理这个问题。它提供了contains方法来判断元素是否包含特定的类名：此方法区分大小写并且可以正确处理连续的空格和换行符等特殊字符。下面是使用classList实现的代码：创建一个辅助函数来检查元素的类列表是否包含特定的类名，然后使用该函数来判断html元素是否含有类名'no-js'。这个函数考虑了各种边界情况，包括类名的分隔符可能不是空格的情况（可能是制表符等）。以上就是本文的全部内容，希望这些内容对大家的学习或工作有所帮助。也希望大家能支持狼蚁SEO！