npm 包 ma-dom 使用教程

简介

ma-dom 是一款轻量级的 JavaScript 库，它提供了一系列操作 DOM 的方法，使得我们能够更加方便地对页面进行操作。ma-dom 的主要特点包括：

• 简单易用：提供了丰富的 DOM 操作方法，调用方式简单易懂。
• 兼容性强：兼容各种浏览器，并且支持移动端。
• 体积小：压缩后仅 3KB 左右，不会给网页带来太多额外的负担。

安装

ma-dom 可以通过 npm 进行安装，使用如下命令：

npm install ma-dom

也可以直接在 HTML 页面中引入 ma-dom 的 CDN 版本：

<script src="https://cdn.jsdelivr.net/npm/ma-dom/dist/ma-dom.min.js"></script>

使用方法

查找元素

在 ma-dom 中，查找元素有多种方式，具体如下：

1. 通过 ID 查找元素

const elem = ma.find('#id');

1. 通过标签名查找元素

const elemList = ma.findAll('tag');

1. 通过 class 名称查找元素

const elemList = ma.findAll('.classname');

操作元素

ma-dom 提供了一些简单易用的方法来操作元素。

1. 获取/设置元素的属性

// 获取属性
const value = elem.getAttr('attrName');

// 设置属性
elem.setAttr('attrName', 'attrValue');

1. 获取/设置元素的样式

// 获取样式值
const value = elem.getStyle('styleName');

// 设置样式值
elem.setStyle('styleName', 'styleValue');

1. 获取/设置元素的文本内容

// 获取文本内容
const text = elem.getText();

// 设置文本内容
elem.setText('newText');

1. 在元素中插入 HTML

elem.html('<div>newHtml</div>');

1. 在元素末尾插入 DOM 对象

elem.append(childElem);

1. 在元素开头插入 DOM 对象

elem.prepend(childElem);

1. 将元素插入到指定元素的前面

elem.insertBefore(siblingElem);

1. 将元素插入到指定元素的后面

elem.insertAfter(siblingElem);

1. 移除元素

elem.remove();

以上仅是 ma-dom 操作元素的部分方法，更多方法请查看官方文档。

示例代码

下面是一个使用 ma-dom 库的简单的示例代码：

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ------------- ------------
-------
------
    ---- ---------------
        ---------- ---------
        ------ ----------- ------------------- ----------
        ------- -----------------------
    ------
    ------- ----------------------------------------------------------------------
    --------
        -- ----
        ----- -------- - -----------------
        ----- --------- - -------------------
        ----- ------------- - ----------------------

        -- --------
        --------------------- ---------- -
            ----- --------- - --------------------------
            -- ----------- -
                ----- -------- - ---------------
                ---------------------- - -----------
                -------------------------------
            -
        ---
    ---------
-------
-------

上述代码中，我们使用 ma-dom 获取了页面中的元素，并且绑定了按钮的事件，当用户点击按钮时，我们会获取姓名输入框的值，并且在页面中插入一条欢迎信息。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f75238a385564ab68b7