局部刷新本质是用JS控制DOM局部更新而非重载页面，核心为fetch拉数据+innerHTML或replaceChildren更新容器；需防事件丢失、XSS、节点未就绪等问题。
局部刷新的本质是绕过完整页面重载
直接刷新整个 index.html 页面必然触发全部资源重新加载、JS 重执行、状态丢失。所谓“局部刷新”，实际是用 JS 主动控制某一块 DOM 的内容更新，不走浏览器默认的导航流程。核心思路只有两个：用 fetch（或 XMLHttpRequest）拉新数据，再用 innerHTML、replaceChildren() 或框架的响应式机制更新对应容器节点。
用 fetch + innerHTML 最快上手
适合静态内容替换，比如刷新一个新闻列表区域或用户信息栏。注意不能直接把整个 HTML 片段塞进 document.body，否则会破坏现有脚本上下文和事件监听器。
常见错误现象：Uncaught TypeError: Cannot set property 'innerHTML' of null —— 容器元素还没加载完就执行 JS；或者用 getElementById 查找的 ID 拼写错误。
- 确保目标容器有唯一 ID，例如
<div id="news-list"></div> - 在
<script>标签里加DOMContentLoaded监听，或把 script 放在 body 底部 - fetch 返回后检查
response.ok，避免用response.text()解析失败的 404/500 响应体 - 如果返回的是纯 HTML 片段（如
<li>...</li><li>...</li>），直接赋给container.innerHTML即可；但要注意内联事件（onclick="..."）不会自动绑定，需手动补addEventListener
const container = document.getElementById('news-list');
fetch('/api/latest-news')
.then(r => r.ok ? r.text() : Promise.reject(r.status))
.then(html => container.innerHTML = html)
.catch(err => console.error('局部刷新失败:', err));
用 replaceChildren 避免 innerHTML 的安全与事件隐患
innerHTML 会销毁原有子节点并重建，导致已绑定的事件监听器全部失效；同时若插入内容来自不可信源，还可能触发 XSS。而 replaceChildren() 是更现代、更可控的替代方案，它接受 DOM 节点或字符串，且不会解析 HTML 字符串为可执行代码。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景：需要保留部分已有节点、或插入动态生成的节点对象（比如用 document.createElement('li') 构建列表项）。
- 若后端返回 JSON 数据，推荐用 JS 构造 DOM 节点后传入
replaceChildren()，而非拼接 HTML 字符串 -
replaceChildren()在 IE 中不支持，如需兼容旧浏览器，可用container.textContent = ''清空后逐个appendChild() - 注意：传入字符串时仍会被当作纯文本渲染（类似
textContent），无法解析标签 —— 这反而是安全优势
局部刷新后表单或按钮失效？检查事件委托是否遗漏
刷新后新插入的按钮点击无反应，大概率是因为你用 element.addEventListener('click', ...) 绑定在了旧节点上，而新节点没绑。这不是局部刷新的问题，是事件绑定方式的问题。
解决方法统一用事件委托：
- 把监听器挂在父容器（比如
document.getElementById('news-list')）上 - 利用
event.target.matches('button[data-action="delete"]')判断是否点中目标元素 - 这样无论后续怎么
replaceChildren或innerHTML，只要新节点符合选择器，事件依然生效
容易被忽略的地方：局部刷新不只是“换内容”，它改变了 DOM 树结构。所有依赖具体节点引用的操作（比如 input.focus()、canvas.getContext()、第三方插件初始化）都得在刷新后重新执行 —— 这部分逻辑必须显式写进 fetch 的 .then() 里，不能指望自动延续。
