如何从纯JavaScript中的元素中删除类？_在纯Javascript中查询元素的伪类_如何在javascript中删除元素的类？ - 腾讯云开发者社区

如何从纯JavaScript中的元素中删除类？

在纯JavaScript中，可以使用classList属性来添加、删除或切换元素的类。classList是一个DOMTokenList对象，提供了多种方法来操作元素的类。

基础概念

classList: 是一个DOMTokenList对象，表示元素的类属性的值的集合。
remove(): 是classList对象的一个方法，用于从元素中删除一个或多个类。

类型

DOMTokenList: classList是一个DOMTokenList对象，它是一个类名的集合，可以通过索引访问，并且提供了多种操作方法。

应用场景

动态样式管理: 在用户交互或数据变化时，动态地添加或删除元素的类，以实现样式的变化。
组件化开发: 在组件化开发中，通过类的添加和删除来控制组件的显示和隐藏。

示例代码

以下是一个简单的示例，展示如何使用classList.remove()方法从元素中删除类：

// 获取元素
var element = document.getElementById('myElement');

// 删除类
element.classList.remove('active');

遇到的问题及解决方法

问题1: 类名不存在

如果尝试删除一个不存在的类，classList.remove()方法不会报错，但也不会有任何效果。

element.classList.remove('nonExistentClass'); // 不会报错，但也不会有任何效果

问题2: 多个类名

如果元素有多个相同的类名，classList.remove()方法只会删除第一个匹配的类名。

element.classList.add('active');
element.classList.add('active');
element.classList.remove('active'); // 只会删除一个 'active' 类

问题3: 兼容性问题

虽然classList API在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不支持。可以通过Polyfill来解决兼容性问题。

<!-- Polyfill for classList -->
<script>
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;
    if (!document.documentElement.contains(el)) return null;
    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1); 
    return null;
  };
}

if (!Element.prototype.classList) {
  Element.prototype.classList = {
    add: function(className) {
      this.className += ' ' + className;
    },
    remove: function(className) {
      this.className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    },
    contains: function(className) {
      return new RegExp('(^| )' + className + '( |$)', 'gi').test(this.className);
    }
  };
}
</script>