classname和classlist的区别

classname和classlist都是用于操作HTML元素的class属性的方法，但它们的区别在于：

1. classname是一个字符串，用于获取或设置元素的class属性值。例如，如果一个元素的class属性值为"red bold"，那么可以使用element.className来获取或设置这个值。

2. classlist是一个DOMTokenList对象，它提供了一组方法来操作元素的class属性值。例如，可以使用element.classList.add("blue")来添加一个名为"blue"的类，使用element.classList.remove("bold")来移除一个名为"bold"的类，使用element.classList.toggle("red")来切换一个名为"red"的类的状态。

因此，虽然classname和classlist都可以用于操作元素的class属性，但它们的用法和功能有所不同。

相关问题

classlist和classname的区别

`classlist` 和 `className` 是两个不同的属性，用于访问 HTML 元素的类列表。

- `classList` 是一个 DOMTokenList 对象，它提供了更多的方法，例如 add()、remove() 和 toggle()，用于动态修改类列表。
- `className` 是一个字符串，表示元素的类列表。如果要修改类列表，可以直接赋值给它。

通常情况下，推荐使用 `classList`。

classList

classList 是 JavaScript 中一个 DOM 元素的属性，它返回一个 DOMTokenList 对象，表示元素的类列表。该属性可以用于添加、删除、切换和检查元素的类。常用的方法包括：

- add(className)：添加指定的类名，如果已存在则不重复添加。
- remove(className)：删除指定的类名，如果不存在则不操作。
- toggle(className)：如果元素存在指定的类名，则删除它；如果不存在，则添加它。
- contains(className)：检查元素是否包含指定的类名。

例如，假设有一个元素：

<div id="myDiv" class="foo bar"></div>

则可以通过以下方式操作它的类：

const myDiv = document.querySelector('#myDiv');

myDiv.classList.add('baz');         // 添加类名：foo bar baz
myDiv.classList.remove('bar');      // 删除类名：foo baz
myDiv.classList.toggle('qux');      // 添加类名：foo baz qux
myDiv.classList.contains('foo');    // true
myDiv.classList.contains('quux');   // false