在进行前端开发时，我们经常需要在 DOM 元素上添加或删除类名，例如实现动画、状态控制等。这时候就可以使用 classList API。然而，IE9 及以下的浏览器并不支持该 API，因此我们需要使用一个 polyfill 来补充其功能。
本文将介绍一个常用的 polyfill，即 classlist-polyfill 的使用方法及相关注意事项。
安装
在项目中安装 classlist-polyfill：
npm install classlist-polyfill --save
引入
在代码中引入 classlist-polyfill：
require('classlist-polyfill');
// 或者
import 'classlist-polyfill';使用
使用 classList API 时，无需再关心浏览器是否支持该 API。例如，下面的代码将为元素 demo 添加类名 active：
document.getElementById('demo').classList.add('active');在使用 classList API 时应注意以下几点：
- 调用
add()、remove()、toggle()方法时，如果参数字符串中包含空格，会被视为多个类名。 - 调用
item()方法获取指定位置的类名时，如果位置超出了类名数量，则返回null。 - 调用
contains()方法判断是否包含某个类名时，如果未找到该类名，则返回false。
如下示例代码展示了 classList 的基本使用：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------- -
------ ----
------------ -----
-
--------
-------
------
-- ---------------------
------- -----------------------------
------- --------------------------------
--------
-------- ----- -
--------------------------------------------------------
-
-------- -------- -
-----------------------------------------------------------
-
---------
-------
-------结语
通过使用 classlist-polyfill，我们可以方便地在所有浏览器中使用 classList API，从而提高开发效率和代码可维护性。同时，在使用 classList API 时，需要注意其一些特殊的用法和返回值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56632