前言
在前后端分离的今天，前端技术极为重要，用于解决页面展示的问题，@lvchengbin/dom 库是一款性能出众的前端工具，提供了大量易用的 DOM 操作 API，可以方便地修改网页中的内容，本文将介绍 @lvchengbin/dom 的使用方法及示例。
安装
使用 npm 命令进行安装即可：
npm install @lvchengbin/dom --save
引用
使用下面的 JavaScript 代码进行引用：
import { $, html, text, attr, addClass, removeClass, on, off, delegate, undelegate } from '@lvchengbin/dom';API
$
$ 函数为 @lvchengbin/dom 提供了一个快速访问元素的方法，它使用 CSS 选择器进行查询，并返回匹配的文档元素。
// 通过类名获取元素
let element = $('.class-name');
// 通过 ID 获取元素
let element2 = $('#div-id');html
html 函数用于设置元素的 HTML 内容。
// 设置元素的 HTML 内容 html( element, '<p>Hello, world!</p>' );
text
text 函数用于设置元素的纯文本内容。
// 设置元素的纯文本内容 text( element, 'Hello, world!' );
attr
attr 函数用于设置元素属性。
// 设置元素属性 attr( element, 'class', 'new-class' );
addClass
addClass 函数用于为元素添加类名。
// 为元素添加类名 addClass( element, 'new-class' );
removeClass
removeClass 函数用于为元素移除类名。
// 为元素移除类名 removeClass( element, 'old-class' );
on
on 函数用于为元素添加事件监听器。
// 为元素添加点击事件监听器
on( element, 'click', () => {
console.log('clicked');
});off
off 函数用于移除元素的事件监听器。
// 移除元素的点击事件监听器 off( element, 'click' );
delegate
delegate 函数用于注册委托事件。
// 为元素注册委托事件
delegate( element, 'a', 'click', () => {
console.log('clicked');
});undelegate
undelegate 函数用于移除委托事件。
// 移除元素的委托事件 undelegate( element, 'a', 'click' );
示例
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ----------
-------
------
-- -------------- ------------------ ----------
------- ------------------ --------------
------- --------------
------ - -- ----- --------- ------------ -- - ---- ------------------
--- - - ----------------
--- ------ - -------------
--- -------- - -----
--- ------- -------- -- -- -
--- -------- - -
------------ -- ----- --
--------- -- ------- --
-------- - ------
- ---- -
------------ -- ------- --
--------- -- ----- --
-------- - -----
-
---
---------
-------
-------以上代码将文本内容的颜色从红色变为绿色，并且通过按钮来切换元素的类名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc8967216659e2445a7