前言
前端开发人员在日常工作中经常需要使用各种工具和插件来构建和优化网站。其中一个重要的方面是 DOM 操作。在使用现代框架和库时，它们通常会为我们提供简单易用的 API。但在某些情况下，我们仍然需要底层的 JavaScript DOM API 来实现一些特定的功能。为此，我们引介了一个名为 dom-lightning 的 npm 包，该包提供一些常用的 DOM 操作方法，可以方便地用于现代浏览器。
快速入门
dom-lightning 可以通过 npm 安装并引入到项目中。我们可以在命令行中输入以下命令来安装它：
npm install --save dom-lightning
在项目中引入该包：
import { dom } from 'dom-lightning';然后，就可以使用 dom 对象上提供的方法了。
常用方法
dom-lightning 提供了一系列的 DOM 操作方法，下面列出了几个常用方法。
dom(selector)
该方法返回与给定 CSS 选择器匹配的第一个元素。例如，要获取 id 为 app 的元素：
const appElem = dom('#app');dom.all(selector)
该方法返回与给定 CSS 选择器匹配的所有元素。例如，要获取所有的 p 元素：
const allPElems = dom.all('p');dom.createHTML(htmlString)
该方法将 HTML 字符串转换为 DOM 元素（或元素列表），并返回引用该元素（或元素列表）的数组。
例如，要创建一个具有以下 HTML 的元素：
<div id="my-div"> <h2>Hello World!</h2> <p>Here is some content</p> </div>
可以通过以下方式创建：
const myDiv = dom.createHTML(`
<div id="my-div">
<h2>Hello World!</h2>
<p>Here is some content</p>
</div>
`);dom.addClass(elem, className)
该方法向指定的元素添加一个类名（可同时添加多个类名以空格分隔）。例如，要向具有 my-class 类的元素添加 new-class 类：
const elem = dom(".my-class");
dom.addClass(elem, "new-class");dom.removeClass(elem, className)
该方法从指定元素中删除一个类名（可同时删除多个类名以空格分隔）。例如，从具有 my-class 和 your-class 类的元素中删除 your-class 类：
const elem = dom(".my-class.your-class");
dom.removeClass(elem, "your-class");dom.toggleClass(elem, className)
该方法在指定元素的类名列表中切换指定的类名。例如，切换具有 my-class 类的元素的 your-class 和 new-class 类：
const elem = dom(".my-class");
dom.toggleClass(elem, "your-class new-class");示例
下面是一个完整的示例，使用 dom-lightning 创建一个简单的动态电影列表：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ------------
-------
------
------ ----- ---------
--- -----------------
------- --------------
------ - --- - ---- ----------------
----- ------ - -
- ------ ---- ----------- ----- ---- --
- ------ ----- --------- ----- ---- --
- ------ ---- --------- ------------ ----- ---- --
- ------ ---- ---- -------- ----- ---- --
- ------ ------------ ----- ---- --
- ------ --------------- ----- ---- --
--
----- ---------- - ---------------
-------------------- -- -
----- -- - ----------------
----
------------------ --------------------
-----
---
------------------------------
---
---------
-------
-------在该示例中，我们首先引入了 dom-lightning，然后创建了一个 MOVIES 数组，并针对每个电影创建了一个 li 元素，并将其附加到 ul 元素中。使用 dom-lightning 可以方便的将 HTML 字符串转换为 DOM 元素，并实现了细粒度的 DOM 操作。
总结
dom-lightning 是一个简单易用的 npm 包，提供了许多常用的 DOM 操作方法。相对于使用 jQuery 或底层 DOM API 进行操作，dom-lightning 更加方便、易用和高效。它提供了一些基本的操作，使开发人员可以专注于业务逻辑，而不是 DOM 操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb277b5cbfe1ea0611172