HTML5非主流API之classList

最新推荐文章于 2025-06-05 01:33:53 发布

转载最新推荐文章于 2025-06-05 01:33:53 发布 · 597 阅读

前端学习笔记专栏收录该内容

99 篇文章

订阅专栏

本文详细探讨了classList API在HTML5中的使用方法，包括如何通过它轻松操作DOM元素的class类，以及其在不同浏览器版本的兼容性情况。classList提供了一种简洁且强大的方式来管理元素的类名，从而简化了前端开发中的类操作。

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

转载地址: http://www.javascript100.com/?p=771

这些接口在一般的HTML5教程中很少被提及，它没有像canvas这类标签的革命意义，人们总是对新功能津津乐道；而classList只能算是在原来基础上一种改进。
classList作为DOM的接口出现。

    {
    length: {number}, /* 引用class类的个数 */
    add: function() { [native code] },
    contains: function() { [native code] },
    item: function() { [native code] }, /* by index */
    remove: function() { [native code] },
    toggle: function() { [native code] }
    }

初一看，和JQuery想到一块去了，毫无疑问，这是一种趋势。我对它持乐观的态度。
classList的方法和属性太简单，看一眼就会。你从此可以摆脱讨厌的className来操作DOM的class了。

    myDiv.classList.add('myCssClass'); //添加myCssClass类
    myDiv.classList.remove('myCssClass'); //移除myCssClass类
    myDiv.classList.toggle('myCssClass'); //切换myCssClass类
    myDiv.classList.contains('myCssClass'); //returns true or false