better-dom 是一个针对现代 web 开发的快速、可扩展、易于使用的 DOM 操作工具库。本文将提供 better-dom 的安装和基本使用指南，让您能够快速开始使用 better-dom。
安装 better-dom
better-dom 可以通过 npm 安装：
npm install better-dom --save
引入 better-dom
在你的代码中引入 better-dom：
import $ from 'better-dom';
或者在 HTML 文件中引入：
<script src="https://cdn.jsdelivr.net/npm/better-dom/dist/better-dom.js"></script>
DOM 操作
选择元素
better-dom 提供了两种方法来选择元素：$() 和 $(selector)。$() 用于选择文档对象，而 $(selector) 用于选择单个或多个元素。
// 选择 body 元素
$('body');
// 选择类名为 'list-item' 的所有元素
$('.list-item');
// 选择 ID 为 'header' 的元素
$('#header');添加和删除元素
使用 better-dom 可以轻松添加和删除元素。使用 create 方法创建新元素，然后使用 $().append() 或 $().prepend() 将其添加到文档中。
// 创建 div 元素，并添加到页面中
$('body').append($.create('div'));
// 创建带有文本的 p 元素，并添加到 .container 元素中
$('.container').prepend($.create('p').text('Hello world!'));
// 删除所有类名为 'list-item' 的元素
$('.list-item').remove();操作元素属性
使用 $().attr() 方法可以轻松操作元素的属性和值。可以使用对象和字符串参数设置和获取属性。
// 获取 div 元素的 id
$('div').attr('id');
// 设置 div 元素的 id
$('div').attr('id', 'new-id');
// 设置 div 元素的多个属性
$('div').attr({ 'id': 'new-id', 'class': 'new-class' });操作元素样式
better-dom 提供了一系列操作元素样式的方法，包括 $().style()、$().addClass()、$().removeClass()。
// 添加 red-style 类
$('.list-item').addClass('red-style');
// 移除 red-style 类
$('.list-item').removeClass('red-style');
// 添加并设置元素样式
$('div').style({ 'background-color': 'red', 'color': 'white' });事件处理
better-dom 提供了多种处理事件的方法，包括 $().on()、$().once() 和 $().off()。使用 $().on() 可以将事件绑定到元素上。
-- -------------------- ---- ------- -- ---------- ----------------------- ---------- - ------------ --------- --- -- ---------- ------------------------- ---------- - ------------ --------- --- -- -------- ------------------------ ---------- - ------------ --------- ---
总结
better-dom 是一个针对现代 web 开发的快速、可扩展、易于使用的 DOM 操作工具库。本文提供了使用 better-dom 的基本指南，包括安装、基本操作和事件处理的用法。希望本文能够帮助您更加轻松地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaebb5cbfe1ea0612504