在前端开发中，DOM 操作是一个很重要的环节。在实际项目中，我们经常需要对 DOM 进行增、删、改、查等操作。在这种情况下，我们通常使用 jQuery 等框架来操作 DOM。但是，使用框架也有一些局限性，如框架过于庞大，加载速度慢，不支持所有的 DOM 操作等等。因此，一个轻量级的 DOM 操作库是非常必要的。
domspace 就是一个这样的轻量级 DOM 操作库，它不仅仅支持常见的 DOM 操作，而且支持 css 选择器、事件委托等较繁琐功能。在本文中，我们将详细介绍如何使用 domspace。
安装
使用 npm 安装 domspace：
npm install domspace
安装完成后，可以将 domspace 引入到项目中，例如：
<script src="node_modules/domspace/dist/domspace.min.js"></script>
或者在 ES6 模块中使用：
import $ from 'domspace'
基本用法
以下代码演示了 domspace 基本用法：
-- -------------------- ---- ------- -- ---- ----- ----- - -------- -- ------ ----- ------ - ----------- -- ---- --------------------------- -- ---- ------------------------------ -- ---- ------------ -- ---- ------------ -- -------- ----- ---- - ------------ -- -------- --------------- ------ -- ---- ---- -- ----- ---- - ------------ -- ---- ---- -- ------------------ ---------- -- ------ ----------------- -------- -- ------ ----- ----- - ----------------- -- ------ ----------------------- -- ---- ----- ------- - --------- ------------- ------------------------- -- ---- -------------- -- ------ ------------------ ------ -- ------------ ----------- ------ ------ --------- ------ -- -- ------- ----------------- ---------- - -------------- -- -- --------- ------------------ -- ---- ------------------- ----- ---------- - --------------------- --
注意，在 domspace 中，元素对象是一个 DOMSpace 对象，可以在对象上直接调用方法，也可以调用大部分 jQuery 能够调用的方法，这是因为 domspace 是基于 jQuery 开发的。
CSS 选择器
domspace 支持 css 选择器，通过选择器可以准确地获取到想要的元素。以下是常见的 css 选择器：
- 元素选择器：
p、span - id 选择器：
#id - 类选择器：
.class - 属性选择器：
[attr="value"] - 后代选择器：
parent child - 子元素选择器：
parent > child - 兄弟元素选择器：
prev + next、prev ~ siblings
可以在 domspace 中使用 css 选择器来获取元素：
// 获取单个元素
const $elem = $('div')
// 获取多个元素
const $elems = $('.class')
// 获取多个元素（包括子元素）
const $elems2 = $('parent child')事件委托
事件委托是一种优化事件处理方式的方法。它的原理是将事件绑定到父元素上，然后通过事件冒泡机制来捕获被委托的所有子元素上的事件。这种方式可以减少事件绑定的数量，提高代码性能。
在 domspace 中，通过以下方式实现事件委托：
$('ul').on('click', 'li', function() {
alert($(this).text())
})可以看到，第二个参数传入了被委托子元素的 css 选择器，在事件处理函数中通过 $(this) 可以获取到被点击的子元素。
总结
本文详细介绍了 npm 包 domspace 的使用方法，包括安装、基本用法、CSS 选择器、事件委托等。相比于 jQuery 等框架，domspace 更加轻量级，易于上手，同时支持大多数常用的 DOM 操作。本文提供的使用方法和示例能够满足绝大多数前端项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb777b5cbfe1ea06117b3