在前端开发中，使用合适的工具和库能够提高开发效率和代码质量。@frampton/dom 是一个实用的 npm 包，它提供了一些常用的 DOM 操作方法，使得前端开发变得更加简单和高效。本文将会介绍该 npm 包的使用教程。
安装
@frampton/dom 是一个可以使用 npm 安装的 npm 包，因此安装过程十分简单。只需在项目根目录下打开命令行终端，输入以下命令：
npm install @frampton/dom
即可安装成功。接着，在需要使用该 npm 包的代码文件中导入 @frampton/dom：
import { addClass } from '@frampton/dom';方法
@frampton/dom 包含了多个常用的 DOM 操作方法，下面分别介绍在实际开发中常用的几个方法。
addClass
该方法可以为指定元素添加指定的 CSS 类名。用法如下：
addClass(elem, className);
其中，elem 参数代表要添加 CSS 类名的元素，className 参数代表要添加的 CSS 类名。使用示例如下：
import { addClass } from '@frampton/dom';
const div = document.querySelector('div');
addClass(div, 'my-class');上述代码将会给查询到的第一个 div 元素添加名为 my-class 的 CSS 类。
removeClass
该方法可以为指定元素移除指定的 CSS 类名。用法如下：
removeClass(elem, className);
其中，elem 参数代表要移除 CSS 类名的元素，className 参数代表要移除的 CSS 类名。使用示例如下：
import { removeClass } from '@frampton/dom';
const div = document.querySelector('div');
removeClass(div, 'my-class');上述代码将会给查询到的第一个 div 元素移除名为 my-class 的 CSS 类。
appendChild
该方法可以在指定元素的末尾添加一个子元素。用法如下：
appendChild(parent, elem);
其中，parent 参数代表要添加子元素的父元素，elem 参数代表要添加的子元素。使用示例如下：
import { appendChild } from '@frampton/dom';
const parent = document.querySelector('div');
const child = document.createElement('p');
parent.appendChild(child);上述代码将会给查询到的第一个 div 元素添加一个 p 子元素。
setData
该方法可以为指定元素设置自定义数据。用法如下：
setData(elem, name, data);
其中，elem 参数代表要设置数据的元素，name 参数代表要设置的数据名称，data 参数代表要设置的数据。使用示例如下：
import { setData, getData } from '@frampton/dom';
const div = document.querySelector('div');
setData(div, 'my-data', { foo: 'bar' });
// 使用 getData 方法获取设置的自定义数据
const myData = getData(div, 'my-data');
console.log(myData); // 输出：{ foo: 'bar' }上述代码将会给查询到的第一个 div 元素设置一个名为 my-data，值为 { foo: 'bar' } 的自定义数据。同时使用 getData 方法获取设置的自定义数据，并进行输出。
总结
@frampton/dom 是一个实用的 npm 包，本文介绍了其中常用的几个 DOM 操作方法，包括 addClass、removeClass、appendChild 和 setData。通过对这些方法的学习和使用，可以帮助我们更加高效的完成前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3381e8991b448daf27