classList属性和className的区别

最新推荐文章于 2025-07-06 22:13:39 发布

转载最新推荐文章于 2025-07-06 22:13:39 发布 · 4.2k 阅读

本文对比了使用className和classList操作DOM元素类名的优劣。详细介绍了classList属性的便利性及其提供的方法，如add(), contains(), remove()和toggle()，这些方法简化了类名的管理和操作。

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

className的不方便之处：

在操作类名时，需要通过className属性添加，删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。（如下所示：）在这里插入图片描述

但是！！！classList却极为方便！！！所以classList诞生了…

●classList属性：这个属性是新集合类型DOMTokenList的实例。其包含以下属性和方法：

->length

->item（）（也可以用方括号语法）：取得每个元素

->add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。

->contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

->remove（）：从列表中删除给定的字符串。

->toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

在这里插入图片描述