简介
dom-easy 是一个轻量级的 JavaScript 库，它提供了简单易用的 DOM 操作 API，可以方便地操作 DOM 树，并提供了一些实用的辅助函数。dom-easy 可以用于开发前端网页、Web 应用程序和框架等。
安装
要使用 dom-easy，你需要在你的项目中安装它。在终端中运行以下命令即可：
npm install dom-easy
使用
在你的 JavaScript 文件中引入 dom-easy：
const { $, $$ } = require('dom-easy');$ 和 $$ 是 dom-easy 中最常用的两个函数，它们分别对应着 document.querySelector 和 document.querySelectorAll。
使用 $ 和 $$，你可以很简单地获取到指定的 DOM 元素：
const element = $('body');
const elements = $$('a');API
除了 $ 和 $$ 之外，dom-easy 还提供了一些其它的实用函数，它们可以方便地操作 DOM 树。
create
create 函数用于创建一个新的 DOM 元素。它接受两个参数，第一个参数是要创建的元素的标签名，第二个参数是一个对象，它包含了要设置的属性和事件监听器。
-- -------------------- ---- -------
----- ------- - ------------- -
--- ---------
------ ------------
-------- -- -- -----------------
------ -
---------------- ------
-------- -------
--
---append
append 函数用于在指定的父节点下添加子节点。
const parent = $('body');
const child = create('div', { id: 'my-div' });
append(parent, child);remove
remove 函数用于从 DOM 树中删除指定的节点。
const element = $('my-div');
remove(element);css
css 函数用于设置指定元素的 CSS 样式。
const element = $('my-div');
css(element, {
backgroundColor: 'blue',
color: 'white',
fontSize: '24px',
});addClass 和 removeClass
addClass 和 removeClass 函数用于添加和删除元素的 CSS 类名。
const element = $('my-div');
addClass(element, 'container');
removeClass(element, 'container');示例
下面是一个使用 dom-easy 创建一个简单的页面的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- -----------------------------
--------------- ----------
------- ------------------------
-------
------
---- ---------------
-------
--------- -------------------- ---- -------
----- - -- ------- ------- --- - - --------------------
----- --- - ---------
----- ----- - ------------ -
---------- -------- -- ----------
------ -
---------- ---------
--
---
----- ---- - ------------ -
------ -
-------- -------
--------------- ---------
---------- -------
-------- ----
--
---
----------- -------
----------- ------
--- ---- - - -- - -- -- ---- -
----- ---- - ------------ -
---------- ----- ------
------ -
---------------- -------
------------- ------
------ --------
------- ----------
------- -------
-------- -------
---------- ---------
----------- ----------------- -----
--
-------- -- -- -
--------- - ---------------- ----- ---
--
---
------------ ------
-这个示例创建了一个包含标题和列表的页面。列表中的每个项都会在鼠标点击时变成红色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/189177