在前端开发中，我们经常需要操作 DOM 元素，比如添加、删除、修改元素的 class。@rangy/classapplier 是一个专门用于操作 class 的 npm 包，今天我们来学习一下如何使用它。
开始安装
首先，我们需要在项目中安装 @rangy/classapplier。在命令行中输入以下命令即可安装：
npm install @rangy/classapplier --save
使用示例
基本用法
@rangy/classapplier 的基本用法比较简单。我们可以通过 new ClassApplier(className) 来创建一个实例，然后通过实例的 applyToRange(range) 方法来操作选择区域内的元素，并给它们添加指定的 className。
import {ClassApplier} from '@rangy/classapplier';
const applier = new ClassApplier('highlight');
const range = window.getSelection().getRangeAt(0);
applier.applyToRange(range);以上代码会给选择区域内的所有元素添加名为 "highlight" 的 class。
高级用法
除了基本用法外，@rangy/classapplier 还提供了一些高级用法，比如：
- 可以使用 options 参数来设置 class 的精确匹配规则；
- 可以使用 unapplyToRange(range) 方法来移除选中区域内的 className；
- 可以使用 isAppliedToElement(element) 方法来判断指定元素是否已经应用了指定的 className。
-- -------------------- ---- ------- ------ -------------- ---- ---------------------- ----- ------- - - ----------------- ----- --------- --------- ------------------ ------- ------------ ------ - ----- ------- - --- ------------------------- --------- ----- ----- - ------------------------------------ ---------------------------- ------------------------------ ----- ------- - --------------------------------- ----- -------- - ---------------------------------- ------------------------------------------------- --------------------------------------------------
以上代码会将精确匹配规则设置为忽略空格，只匹配 <span> 标签，同时为应用了 "highlight" 的元素设置 title 属性为 "highlighted text"。然后，它会先对选择区域内的元素应用 "highlight"，再移除它，最后输出传入的两个元素是否已经应用了 "highlight"。
总结
通过本文的介绍，我们了解了 @rangy/classapplier 的基本用法和一些高级用法，可以通过这些用法来方便地操作 DOM 元素的 class。在实际开发中，我们可以根据自己的需求，在 @rangy/classapplier 的基础上进行扩展和定制，以便更好地完成项目中的各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672643660cf7123b36484