概述
moy-dom 是一个基于原生 JavaScript 封装的 DOM 操作工具库,可以帮助我们简洁地操作 DOM 元素,提高开发效率。本文主要介绍使用 moy-dom 的相关知识及操作方法。
安装
使用 npm 安装 moy-dom:
npm install --save moy-dom
使用
在代码中引入 moy-dom:
import { query } from 'moy-dom';
然后就可以使用其中的方法了。
方法介绍
query
查询 DOM 元素,支持 CSS 选择器。
query(selector: string, context: HTMLElement | Document = document);
- selector:选择器,必需;
- context:查询上下文,非必需,默认为 document。
queryAll
查询多个 DOM 元素,支持 CSS 选择器。
queryAll(selector: string, context: HTMLElement | Document = document);
- selector:选择器,必需;
- context:查询上下文,非必需,默认为 document。
attr
获取或设置 DOM 元素的属性值。
attr(element: HTMLElement, key: string, value?: string | number): string;
- element:DOM 元素,必需;
- key:属性名,必需;
- value:属性值,非必需。
hasClass
判断 DOM 元素是否包含某个类名。
hasClass(element: HTMLElement, className: string): boolean;
- element:DOM 元素,必需;
- className:类名,必需。
addClass
给 DOM 元素添加类名。
addClass(element: HTMLElement, className: string): void;
- element:DOM 元素,必需;
- className:类名,必需。
removeClass
移除 DOM 元素的某个类名。
removeClass(element: HTMLElement, className: string): void;
- element:DOM 元素,必需;
- className:类名,必需。
toggleClass
切换 DOM 元素的某个类名。
toggleClass(element: HTMLElement, className: string): void;
- element:DOM 元素,必需;
- className:类名,必需。
on
给 DOM 元素绑定事件。
on(element: HTMLElement, event: string, handler: EventListener, capture?: boolean): void;
- element:DOM 元素,必需;
- event:事件名称,必需;
- handler:事件处理函数,必需;
- capture:事件捕获或冒泡,非必需,默认为 false。
off
解除 DOM 元素绑定的事件。
off(element: HTMLElement, event: string, handler: EventListener): void;
- element:DOM 元素,必需;
- event:事件名称,必需;
- handler:事件处理函数,必需。
示例代码
<div id="app"> <button id="btn" class="btn">点击我</button> </div>
-- -------------------- ---- ------- ------ - ------ --------- ------------ --- --- - ---- ---------- ----- --- - -------------- -- -- --- -- ----- --- - -------------- -- ---- ------------- --------------- -- ---- ---------------- ------- -- ---- -------- ------------- - ----------------------- - ------- -------- ------------- -- ------ -------- -------- -------------
总结
moy-dom 是一个非常方便实用的 DOM 操作工具库,使用简单,具有一定的深度和指导意义,希望本文对大家有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fb5