原生 dom 操作易出错因未对齐更新节奏与节点生命周期，自定义元素应封装创建即配置、批量插入防抖动、事件委托兜底三大能力，table 元素须用原生 api 管理，且操作需确保 dom 就绪。
为什么原生 DOM 操作容易出错
直接用 document.createElement、appendChild、setAttribute 串起来写，逻辑一复杂就容易漏掉 documentFragment 缓存、忘记解绑事件、或在循环里反复触发重排。更麻烦的是：动态插入的按钮点击没反应、表格行删错索引、表单提交后状态没清空——这些问题不是 JS 写错了，而是 DOM 更新节奏和节点生命周期没对齐。
自定义元素该封装哪些核心能力
别从零造轮子，先聚焦三个高频痛点：
-
创建即配置：把
document.createElement+setAttribute+textContent合成一步，比如HTML.create('button', { class: 'btn', text: '提交' }) -
批量插入防抖动：内部自动用
DocumentFragment缓存，避免循环中多次appendChild导致性能掉帧 -
事件委托兜底：提供类似
HTML.on('click', '.del-btn', handler)的语法，绑定到 document 或指定容器，天然支持后续动态添加的元素
注意：不要封装 innerHTML 直接赋值——它绕过浏览器校验，且易引入 XSS；优先走 textContent + appendChild 组合。
table 元素必须用原生 API 管理
自定义元素可以简化 div、span、button，但 table 是个例外。它的 DOM 结构强约束（thead/tbody/tr/td 必须嵌套），浏览器对 insertRow、deleteRow 有特殊优化。强行用 HTML.create('tr') 然后 appendChild 到 tbody，可能触发 tbody 重绘异常，甚至在旧版 Safari 中报错。
正确做法是保留原生链式调用：
const tbody = document.querySelector('tbody');
const tr = tbody.insertRow(); // 不要 new Element('tr')
const td = tr.insertCell();
td.textContent = '数据项';
如果你非要统一封装，那就只封装「行级操作」，比如 HTML.addRow(tbody, ['列1', '列2'])，内部仍调用 insertRow 和 insertCell。
容易被忽略的时机问题
自定义元素再好，也救不了 DOM 尚未就绪的代码。常见错误是：页面还没加载完，就执行 HTML.query('.main')，返回 null。这不是库的问题，是执行时机错了。
解决方案只有两个：
- 把初始化逻辑包进
document.addEventListener('DOMContentLoaded', ...) - 或者用现代写法：
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init) } else { init() }
别依赖 setTimeout 或 window.onload——前者不可靠，后者等所有资源（图片、字体）加载完才触发，太晚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
