根本原因是dom结构变化或查询时机不当；应缓存父容器引用、用replacechildren或事件委托更新内容，并通过data属性定位元素确保稳定性。
原生 JS 动态局部刷新后，querySelector 失效，根本原因不是选择器写错了，而是 DOM 结构变了、元素被替换了，或者查询时机不对。关键不在“怎么选”，而在“选谁”和“何时选”。
刷新前先保存目标容器引用，而非反复查 DOM
每次用 querySelector 都会重新遍历 DOM 树，若刷新时整个区域（如 <div id="list">）的 <code>innerHTML 被整块替换，里面所有子元素就变成新节点——旧绑定的事件、旧查到的元素引用全部作废。
- 正确做法：在刷新前获取并缓存父容器引用，后续操作都基于它，例如：
const listEl = document.querySelector('#list'); - 刷新时只更新它的内容：
listEl.innerHTML = newHtml; - 后续查找子元素，统一用
listEl.querySelector(...)或listEl.querySelectorAll(...)，确保始终在最新 DOM 子树中查询
避免用 innerHTML 替换导致事件丢失，改用更可控的更新方式
直接赋值 innerHTML 是最简方式，但会销毁原有元素及其监听器。如果页面依赖子元素上的点击、输入等事件，必须补救。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 优先使用
replaceChildren()（现代浏览器支持）：listEl.replaceChildren(...newElements);—— 更语义化，且能保留部分状态 - 或手动清空再逐个
append()元素，便于为每个新元素单独绑定事件 - 若仍用
innerHTML，事件必须用事件委托：把监听器挂在listEl上，通过event.target.matches('.btn-delete')判断来源，这样即使子元素重绘也不影响监听
动态内容加载后，确保 querySelector 在 DOM 更新完成后再执行
fetch 返回 HTML 片段后，赋值给 innerHTML 是同步的，但浏览器渲染、子元素可被查询，需注意时机。
- 一般情况下，赋值后立即调用
querySelector是安全的（DOM 已更新） - 但若内容含自定义元素、Web Components 或依赖
DOMContentLoaded的脚本，建议加微任务保障：listEl.innerHTML = html;<br>Promise.resolve().then(() => {<br> const btn = listEl.querySelector('.action-btn');<br> if (btn) btn.addEventListener('click', handler);<br>});
用属性定位比层级定位更稳定，尤其适合动态刷新场景
刷新后 DOM 结构可能微调（比如多一层 wrapper、class 名变动），靠 .list > .item:first-child 这类强结构的选择器容易断裂。
- 给关键元素添加稳定标识，如
data-role="user-card"或data-id="123" - 查询时用：
listEl.querySelector('[data-role="submit-btn"]')或listEl.querySelector('[data-id="456"]') - 这类属性由 JS 控制，不受模板渲染逻辑干扰，刷新前后语义一致
