在前端开发中，我们时常需要操作 DOM 元素的 class name，而现代浏览器提供了 classList 属性来方便我们操作 class，但是这个属性并不兼容所有的浏览器，尤其是一些老的浏览器，如 IE6-9 。这时我们可以借助于一些 Polyfill 库来解决问题。本篇文章介绍的就是其中一个 Polyfill 库—— rkgttr-classlistpolyfill。
简介
rkgttr-classlistpolyfill 是一款用于解决 classList API 在老版本浏览器不支持的问题的 JavaScript Polyfill 库，它可以让已有的 DOM 元素实例支持 classList API，同时支持新添加的 DOM 元素实例。
安装
rkgttr-classlistpolyfill 是一个 npm 包，在使用前需要先安装，在终端命令行中输入以下命令即可：
npm install rkgttr-classlistpolyfill --save
这里我们使用 --save 参数将其添加到项目依赖中，这样其他人在拉取这个项目时也能够自动安装 rkgttr-classlistpolyfill。
基本用法
引入 rkgttr-classlistpolyfill：
require('rkgttr-classlistpolyfill');rkgttr-classlistpolyfill 会自动为全局 DOMTokenList 和 Element 添加 add, remove, toggle, contains 四个方法，以及 classList 属性（仅在 Element 上），这样我们就可以方便地在老版浏览器中使用 classList API 了。
示例代码：
-- -------------------- ---- ------- -- ----- ----- ----------------------------- -------------------------------- -------------------------------- ---------------------------------- -- -- ----- --- ---- - - -- - - ------------------------- ---- - ---------------------------------- -
更多用法可以参见 MDN 文档。
细节问题
添加/删除多个 class
rkgttr-classlistpolyfill 的 add 和 remove 方法只能添加/删除一个 class，如需添加/删除多个 class，需要使用循环：
-- -------------------- ---- ------- -- ------ ----- ------- ------ ---------------------------------- - --------------------------------- --- -- ------ ----- ------- ------ ---------------------------------- - ------------------------------------ ---
使用过程中的注意事项
如果 Element 的另一个接口提供了 class 相关操作（如 jQuery 的
addClass/removeClass/toggleClass），则最好不要混用它们，以免出现不可预料的问题。一些浏览器（如 IE10-）会有 CSS 选择器个数限制，这时如果一个元素的 class name 个数过多可能会导致选择器编译失败和样式渲染失败。因此，最好不要在一个元素上添加过多的 class。
总结
rkgttr-classlistpolyfill 是一个兼容旧版浏览器的 Polyfill 库，它提供了与现代浏览器相同的 classList API，使我们可以方便地对 DOM 元素的 class 进行操作。在使用时需要注意一些细节问题，如添加/删除多个 class 和不要与其他接口混用等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551a981e8991b448cf065