在前端开发中，操作 DOM 元素是必不可少的工作。但是 DOM 元素的属性和样式设置繁琐，尤其是当需要对多个元素进行操作时，代码显得冗长而难以维护。这时候可以使用 npm 包 dom-set 来优化开发。
dom-set 是一个轻量级的 npm 包，用于简化 DOM 元素属性和样式设置的过程，提高开发效率。本文就来详细介绍一下如何使用 dom-set。
安装
使用 npm 安装 dom-set：
npm install dom-set
引入
在需要使用的 js 文件中引入 domSet：
import domSet from 'dom-set';
API
dom-set 在原生的基础上封装了一些常见的操作，包括：获取元素、设置/获取样式、设置/获取属性等。
获取元素
使用 domSet.getElement(selector) 获取元素，其中 selector 可以是 class、id 或者 tag name。例如：
const elem = domSet.getElement('.container'); // 获取 class 为 container 的元素
console.log(elem); // 输出获取的元素，并可以进行其他操作设置/获取样式
使用 domSet.setStyle(elem, style) 设置样式，其中 elem 是要设置样式的元素，style 是包含样式名和样式值的对象。
const elem = domSet.getElement('.container');
domSet.setStyle(elem, {'background-color': 'red', 'color': 'white'});使用 domSet.getStyle(elem, styleName) 获取样式值，其中 elem 是要获取样式的元素，styleName 是要获取的样式名。
const elem = domSet.getElement('.container');
const bgColor = domSet.getStyle(elem, 'background-color');
console.log(bgColor); // 输出获取到的背景色值设置/获取属性
使用 domSet.setAttr(elem, attrName, attrValue) 设置属性，其中 elem 是要设置属性的元素，attrName 是要设置的属性名，attrValue 是要设置的属性值。
const elem = domSet.getElement('.container');
domSet.setAttr(elem, 'name', 'container');使用 domSet.getAttr(elem, attrName) 获取属性值，其中 elem 是要获取属性的元素，attrName 是要获取的属性名。
const elem = domSet.getElement('.container');
const name = domSet.getAttr(elem, 'name');
console.log(name); // 输出获取到的属性值示例代码
下面是一个通过 dom-set 快速设置多个元素属性和样式的示例代码：
-- -------------------- ---- ------- ------ ------ ---- ---------- -- ------ ----- ----- - ---------------------------------------- -- ------- --- ---- - - -- - - ------------- ---- - ----- ---- - --------- -- ---- -------------------- ------- ------------ - --- -- ---- --------------------- -------------------- ------ -------- ---------- -
结语
通过 dom-set，我们可以方便地操作 DOM 元素的属性和样式，大大提高了开发效率，并且代码看起来更简洁易懂。希望这篇文章能够帮助大家更好地使用 dom-set。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f13d92f403f2923b035c2ce