简介
select-dom 是一个用于在 DOM 中选择元素的简单 JavaScript 库。它允许您使用 CSS 选择器来轻松地选择和操作 DOM 元素，以及对它们进行一系列操作，例如添加、删除或修改属性等。
安装
您可以通过 NPM 来安装 select-dom：
npm install select-dom
用法
选择元素
要选择一个或多个元素，请使用 select 或 selectAll 函数：
import { select, selectAll } from 'select-dom'; // 选择单个元素 const element = select('.my-class'); // 选择多个元素 const elements = selectAll('.my-class');
操作元素
一旦您选择了一个或多个元素，您就可以执行各种操作，例如添加、移动或删除元素，以及更改它们的属性和样式。
添加元素
要添加一个新的元素，请使用 create 函数：
import { create } from 'select-dom'; // 创建一个新的 <div> 元素 const newDiv = create('div'); // 向页面添加新元素 document.body.appendChild(newDiv);
移动元素
要将一个元素移到另一个位置，请使用 move 函数：
-- -------------------- ---- ------- ------ - ------- ---- - ---- ------------- -- -------- ----- ------------- - ---------------------- -- ----------- ----- ------------- - --------------------- -- ------------- ------------------- -------------- ------------展开代码
删除元素
要删除一个元素，请使用 remove 函数：
import { select, remove } from 'select-dom'; // 选择要删除的元素 const elementToRemove = select('.my-element'); // 删除元素 remove(elementToRemove);
更改属性
要更改元素的属性，请使用 setAttr 或 removeAttr 函数：
-- -------------------- ---- ------- ------ - ------- -------- ---------- - ---- ------------- -- ---------- ----- --------------- - ---------------------- -- ---- ------------------------ ----------------- ---------- -------- -- ---- --------------------------- ------------------展开代码
更改样式
要更改元素的样式，请使用 setStyle 或 removeStyle 函数：
-- -------------------- ---- ------- ------ - ------- --------- ----------- - ---- ------------- -- ---------- ----- ---------------- - ---------------------- -- ---- -------------------------- ------------------- ------- -- ---- ----------------------------- --------------------展开代码
示例代码
以下是一个简单的示例，演示如何使用 select-dom 来选择和操作 DOM 元素：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----------------- ---------- ------- ------ ---- ------------------ --------- --- ------- ---- --------------------- ----- ----- --- ----- ----------- ---------- ----------- ------- ---------------------------------------- ------ ------- -------------- ------ - ------- ---------- ------- ----- ------- -------- ----------- --------- ----------- - ---- ------------- -- ---- ----- --------- - --------------------- ----- ------- - ------------------- ----- ------ - ------------------------------- -- ----- ----- ------ - -------------- --------------- ------------ ----------- ---------------- ------------------- ---------- ------------------------------ -- ---- ------------- ------- --------------- -- ---- ------------------- ------------------- ------------- -- -------- ----------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
