简介
mare-dom 是一款基于 JavaScript 的 npm 包，用于操作 HTML DOM 元素。它提供了一系列简单易用的 API，可以方便地增删改查任意 HTML 元素的属性和样式，并支持事件绑定与解绑。
安装
使用 npm 安装：
npm install mare-dom --save
或者使用 yarn 安装：
yarn add mare-dom
使用方法
在 JavaScript 代码中引入 mare-dom：
import mareDom from "mare-dom";
或者使用 require：
const mareDom = require("mare-dom");选择元素
使用 mareDom 的 select 方法选择一个或多个元素，该方法使用 CSS 选择器作为参数，返回指定的元素或元素集合，示例：
<div class="container"> <div id="header">Header</div> <div class="content">Content</div> <div id="footer">Footer</div> </div>
// 选择单个元素
const header = mareDom.select("#header");
// 选择多个元素
const contentBlocks = mareDom.select(".content");操作元素属性
使用 mareDom 的 attr 方法获取或设置元素的属性，该方法的第一个参数表示属性名，第二个参数表示属性值（可选），示例：
// 设置属性 mareDom.attr(header, "title", "This is header"); // 获取属性 const title = mareDom.attr(header, "title");
另外，mareDom 还提供了一些常用的快捷方法，例如 mareDom.text、mareDom.html、mareDom.value，用于快速获取或设置元素的文本内容、内部 HTML 或表单元素的值。
操作元素样式
使用 mareDom 的 css 方法获取或设置元素的样式，该方法的第一个参数表示样式名，第二个参数表示样式值（可选），示例：
// 设置样式 mareDom.css(header, "background-color", "red"); // 获取样式 const bgColor = mareDom.css(header, "background-color");
操作元素内容
使用 mareDom 的 text 和 html 方法获取或设置元素的文本内容和内部 HTML，示例：
-- -------------------- ---- ------- -- ------ -------------------- ----- -- --------- -- ------ ----- ----------- - --------------------- -- ---- ---- ------------------------------ -------- -------------- -- ---- ---- ----- --------- - -------------------------------
元素操作方法
使用 mareDom 的 create、append、prepend、after 和 before 方法操作元素，示例：
-- -------------------- ---- ------- -- ---- ----- ---- - -------------------- -- ----------- ---------------------- ------ -- ----------- ----------------------- ------ -- --------- --------------------- ------ -- --------- ---------------------- ------
事件操作方法
使用 mareDom 的 on 和 off 方法绑定或解绑元素事件，示例：
// 绑定元素事件
mareDom.on(button, "click", (event) => {
alert("Button clicked");
});
// 解绑元素事件
mareDom.off(button, "click");总结
以上是 mare-dom 的使用教程，它提供了一种方便快捷的方式操作 HTML DOM 元素，并且可以与其他 JavaScript 库或框架轻松集成。掌握了 mare-dom 的使用方法，您可以更加高效地完成前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da232