掌握JS节点操作高级技巧需理解节点生命周期、批量更新逻辑与性能边界：区分Element（nodeType=1）、Text（3）、Comment（8）节点；批量插入用DocumentFragment避免多次重排；替换内容优先textContent或insertAdjacentHTML；事件委托提升动态列表性能。
掌握 JS 节点操作的高级进阶技巧，关键不在“多学 API”，而在理解节点生命周期、批量更新逻辑和性能边界。真正拉开差距的，是知道什么时候该用 DocumentFragment，什么时候该避免 innerHTML，以及如何让 DOM 变更不卡住主线程。
理解节点类型与真实 DOM 树结构
DOM 不是扁平列表，而是一棵由多种节点构成的树。实际开发中常混淆 Element 节点和 Text 节点，导致取不到文本或误删注释。
-
Element 节点：对应 HTML 标签（如
<div>、<code><button></button>），可调用querySelector、classList等方法 -
Text 节点：标签内纯文本内容，没有子元素，不能设 class 或 style；需用
textContent读写，而非innerHTML -
Comment 节点：HTML 中的
<!-- ... -->，在遍历childNodes时会出现，但children会自动过滤掉它 - 创建片段：
const frag = document.createDocumentFragment() - 往里加节点：
frag.appendChild(div1); frag.appendChild(div2) - 最后只执行一次：
parent.appendChild(frag) - 仅更新文字？用
textContent—— 安全、保留事件、无解析开销 - 要插结构且可信？优先用
insertAdjacentHTML('beforeend', html)，比 innerHTML 更可控（可指定插入位置） - 动态生成复杂结构？推荐
createElement+setAttribute+append组合，代码稍长但完全可控、可调试、无注入风险 - 绑定一次：
list.addEventListener('click', handleClick) - 在 handler 中识别目标：
if (e.target.matches('.delete-btn')) { ... } - 新增子项无需重新绑定，天然支持动态内容
验证方式很简单：console.log(el.nodeType) —— 1 是 Element，3 是 Text，8 是 Comment。
批量插入必须用 DocumentFragment
直接循环 appendChild 十个新节点，会触发十次重排（reflow），性能极差。正确做法是先把所有节点塞进一个“离线容器”，再一次性挂载。
现代写法也可用 parent.append(...nodes)（支持展开语法），但 Fragment 在旧浏览器兼容性更好，且语义更清晰——明确表达“这批节点暂不渲染”。
安全高效地替换/更新内容
别一上来就用 innerHTML = htmlString。它快但危险：可能执行 script、引入 XSS；还会销毁已有事件监听器和表单状态（比如 input 的 cursor 位置、select 的选中项）。
用事件委托代替重复绑定
给 100 个列表项每个都绑 click，既浪费内存，又难维护。高级做法是只在父容器上监听，靠事件冒泡 + event.target 判断来源。
配合 closest() 还能向上找最近符合条件的祖先，比如点击表格任意位置都能定位到整行：e.target.closest('tr')。
