前言
在 Web 前端开发中，操作 DOM 是最常见的操作之一。yagni-dom 是一个小巧而灵活的 npm 包，它封装了一系列 DOM 操作函数，使得操作 DOM 变得更加轻松和高效。本文将介绍如何使用 yagni-dom 包，帮助读者更好地理解和应用 yagni-dom。
yagni-dom 简介
yagni-dom 是一个轻量级的 JavaScript 库，封装了常见的 DOM 操作。yagni-dom 的设计思路非常简单：You Aren't Gonna Need It ，即你不需要它所没有的东西。 所以，yagni-dom 并没有像其他 DOM 操作库那样包含大量的功能和接口，而是只提供了一些基本而常用的接口。因此，yagni-dom 很小巧，代码清晰，且易于使用和扩展。
安装 yagni-dom
可以使用 npm 命令来安装 yagni-dom：
npm install yagni-dom --save
安装完成后，就可以使用 yagni-dom 操作 DOM 了。
包含的函数
yagni-dom 包含了一些基本的 DOM 操作函数，如下所示：
1. $()
$() 函数是 yagni-dom 中最核心的函数，它用来选择 DOM 元素。它的代码如下：
function $(selector, context) {
return (context || document).querySelectorAll(selector);
}该函数接受两个参数：选择器字符串和 DOM 节点。如果提供了 DOM 节点，$() 函数将在该节点内执行选择器。否则，它将在整个文档中执行选择器。该函数返回一个 NodeList 对象，其中包含匹配选择器的所有元素。
2. on()
on() 函数用来为选择的 DOM 元素绑定事件。它的代码如下：
function on(eventType, handler, context) {
const elements = $(this, context);
for (let i = 0, len = elements.length; i < len; i++) {
elements[i].addEventListener(eventType, handler);
}
}该函数接受三个参数：事件类型、处理函数和 DOM 节点。在指定的节点范围内使用 $() 函数选择相应的元素，然后绑定指定类型的事件。
3. off()
off() 函数用来为选择的 DOM 元素解除事件绑定。它的代码如下：
function off(eventType, handler, context) {
const elements = $(this, context);
for (let i = 0, len = elements.length; i < len; i++) {
elements[i].removeEventListener(eventType, handler);
}
}该函数和 on() 一样接受三个参数：事件类型、处理函数和 DOM 节点。在指定的节点范围内使用 $() 函数选择相应的元素，然后对这些元素解除指定类型的事件绑定。
4. html()
html() 函数用来获取或设置 HTML 内容。它的代码如下：
function html(content) {
const element = $(this)[0];
if (content === undefined) {
return element.innerHTML;
}
element.innerHTML = content;
}该函数接受一个字符串参数，如果传入参数，则将元素的 innerHTML 设置为该字符串；否则，返回元素的 innerHTML。
5. text()
text() 函数用来获取或设置文本内容。它的代码如下：
function text(content) {
const element = $(this)[0];
if (content === undefined) {
return element.textContent;
}
element.textContent = content;
}该函数和 html() 一样，接受一个字符串参数，如果传入参数，则将元素的 textContent 设置为该字符串；否则，返回元素的 textContent。
使用示例
下面是一个使用 yagni-dom 的示例：
-- -------------------- ---- -------
------
------
---------------- ------------
------- ----------------------------
-------
------
----
-----------
-----------
-----------
-----
--------
----- ------ - --------
--------------- -------- ---------- -
----------------------------------
------------------------- -------
-------------------- ------------- - - ---------
---
-------------------- ------------- - - ---------
---------
---- ------------------
-------
-------该示例创建了一个包含三个列表项的无序列表。通过调用 on() 函数，为列表项绑定了 click 事件。当用户单击一个列表项时，该项的 class 属性将切换为 selected，相应的 HTML 内容和文本内容也会发生变化。输入以下命令，可以在浏览器中打开该示例。
open example.html
总结
yagni-dom 是一个小巧而灵活的 npm 包，它提供了一系列 DOM 操作函数，使得操作 DOM 变得更加轻松和高效。在使用 yagni-dom 时，需要先通过 $() 函数选择 DOM 元素，然后使用其他函数对其进行操作。本文对 yagni-dom 中常用的函数进行了说明，并提供了一个使用示例，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725381e8991b448e8641