innerHTML = '' 清空最快但会丢失 addEventListener 绑定的事件监听器，不触发 beforeunload 或销毁逻辑，适用于纯展示容器；需确保无运行时状态或外部引用，contenteditable 或 iframe 场景建议用 replaceChildren()。
直接用 innerHTML = '' 最快，但会丢失事件监听器
如果子元素上绑定了通过 addEventListener 添加的事件，清空 innerHTML 会直接移除整个 DOM 片段，监听器自然失效，且无法触发 beforeunload 或自定义销毁逻辑。适合纯展示型容器（比如动态渲染列表后不再交互）。
实操建议：
- 确认子元素无运行时状态或外部引用，否则可能引发内存泄漏
- 若父元素有
contenteditable="true"或含iframe，innerHTML = ''可能触发重排异常，优先改用replaceChildren() - 在旧版 Safari（innerHTML = '' 对
table子元素清理不彻底，需额外处理tbody、tr
while (el.firstChild) el.removeChild(el.firstChild) 兼容性最好
这是最稳妥的逐个移除方式，所有浏览器都支持，且会正常触发 DOMNodeRemoved（已废弃但部分 polyfill 仍依赖）和 mutationObserver 回调。
常见错误现象：写成 for (let i = 0; i —— 因为 children 是实时集合，每次删除后索引前移，实际只删掉约一半节点。
使用场景：
- 需要确保每个子节点的
disconnectedCallback被调用（Web Components） - 配合
MutationObserver做清理审计 - 父元素是
select、optgroup等表单容器，避免innerHTML引发选项重置异常
replaceChildren() 是现代标准推荐方案
它原生支持清空并可选插入新内容，语义清晰，性能接近 innerHTML = ''，且保留父元素自身属性与事件监听器，不会触发不必要的重绘。
注意点：
- IE 完全不支持，Edge 18- 不支持；如需兼容到 Edge 17，必须降级 fallback
- 传入
null或空参数即清空：el.replaceChildren()，不要传undefined（会变成文本节点） - 若子元素中有通过
document.importNode()克隆的节点，replaceChildren()会自动 adopt，而removeChild需手动ownerDocument校验
用 textContent = '' 也能清空，但会破坏 HTML 结构
它把所有子节点（包括元素、注释、文本）全部转为纯文本并清空，等价于删掉整个 DOM 树再设为空字符串。看起来快，实则危险。
典型误用场景：
- 父元素内有
script标签——textContent = ''不会执行脚本卸载逻辑，可能导致全局变量残留 - 含 SVG 元素时，
textContent会忽略命名空间，后续再 append 同名标签易出解析错误 - 服务端渲染（SSR）后客户端 hydrate 阶段误用，会破坏 React/Vue 的 vnode 映射关系
批量删子元素真正难的不是“怎么删”，而是判断“该不该删”——比如子元素是否被其他模块持有引用、是否正在动画、是否有未 resolve 的 Promise 关联到其 dataset。这些没法靠一个 API 解决，得结合具体生命周期设计。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
