Class 封装 DOM 操作库的核心是创建可复用、链式调用、状态隔离的实例，通过 Dom 类接收选择器或节点，内部以数组保存元素，统一处理增删改查与事件绑定，并支持扩展与内存安全。
用 Class 封装 DOM 操作库，核心是把常用操作（如选择、增删改查、事件绑定）抽象成可复用、链式调用、状态隔离的实例方法，避免全局污染和重复逻辑。
设计基础 Class 结构
定义一个主类（比如 Dom），构造函数接收选择器或原生 DOM 节点，内部保存节点集合（支持多元素），并返回 this 以支持链式调用。
- 用
Array.from()或[...document.querySelectorAll(...)]统一转为数组，便于遍历操作 - 不直接修改原生 NodeList，而是封装一层自有数据结构（如
this.elements = []） - 构造时兼容多种输入：
new Dom('.box')、new Dom(document.getElementById('app'))、new Dom([el1, el2])
实现核心 DOM 方法
每个方法作用于内部 this.elements，批量处理，并保持链式返回 this。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
find(selector)：对当前所有元素调用
querySelectorAll，合并结果并新建实例返回 - html(str?)：有参数则设 innerHTML，无参数则取第一个元素的 innerHTML（类似 jQuery）
- on(type, handler, options?)：遍历绑定事件，自动绑定到 each 元素，支持委托（可加 delegate 参数）
-
addClass(name)：用
classList.add()批量操作，跳过文本节点等非 Element
支持链式与扩展性
所有方法返回 this，但注意异步操作（如动画、fetch）不宜链式，可单独提供 then() 或 Promise 化接口。
- 预留
extend({ method })静态方法，允许用户挂载自定义功能（如Dom.extend({ fadeOut() { ... } })） - 提供
get(index)和toArray()用于退出链式、获取原始节点 - 重写
toString()或添加length属性，方便调试和判断空状态
避免常见陷阱
封装时容易忽略 DOM 动态变化和内存管理。
- 不缓存已销毁的节点——每次操作前可用
el.isConnected过滤无效元素 - 事件绑定后，若需解绑，应保存 handler 引用（避免匿名函数），或提供
off()配套方法 - 不要在 Class 内部直接修改原型（如
Element.prototype），保持纯净性和可预测性
