element.closest() 返回 null 是因广告脚本篡改 DOM 结构导致物理父子关系断裂，而非 API 或选择器错误；应通过 MutationObserver 监听结构变化、缓存 CSS 路径、限定范围 fallback 并监控主线程长任务来应对。
element.closest() 返回 null 不代表 API 坏了，是广告脚本动了 DOM 结构——它删、插、挪父容器，物理父子关系断了，路径就失效。
为什么 closest() 突然查不到祖先节点
这不是浏览器 bug，也不是 selector 写错。广告 SDK 常用 appendChild()、replaceChild() 或直接把整个表单塞进新 <div class="ad-wrapper"> 里，你原来的 button.closest('.payment-form') 路径就断在中间。
- 现象：手动 inspect 还能看到
.payment-form存在，但closest返回null - 本质：依赖的是节点间真实父子链，不是 class 名字是否还在 DOM 树里
- 风险：失败后若没 fallback，关键操作（如提交）直接中断，比慢更致命
用 MutationObserver 提前捕获结构断裂
别等 closest() 失败才处理。广告脚本动手时，MutationObserver 能第一时间感知，帮你缓存有效路径或触发降级逻辑。
- 监听配置必须设
{ childList: true, subtree: true }，否则深层移动抓不到 - 重点盯
removedNodes是否含你起点元素的父级，或addedNodes是否出现带ad-、banner-的 wrapper - 缓存路径用 CSS 选择器数组，比如
['#app', '.checkout', '.form-container']，不用 DOM 引用，避免引用失效 - 回溯时用
document.querySelectorAll(path.join(' > ')).at(0)，比递归parentElement更稳、兼容性更好
fallback 查找不能无脑全局搜
document.querySelector('.payment-form') 看似简单，但广告可能自己也插了个同名 div，结果你 submit 的是它的假表单。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 限定范围起步：从
document.getElementById('app')或document.querySelector('main')开始再查 - 跳过已知干扰层：写个辅助函数，遇到
el.parentElement?.closest('.ad-wrapper')就跳一级再查 - 双重校验保底：对关键操作加
el.matches(selector) || (el.parentElement && el.parentElement.closest(selector)) - 绝对不要无条件降级到
document.querySelector(selector)，尤其 selector 是泛用 class（如.container）
广告脚本执行本身怎么监控
DOM 结构乱只是表象，真正卡顿常来自广告 JS 在主线程跑长任务。Performance API 捕不到 iframe 里的细节，但 PerformanceObserver 可以抓到它拖慢整个页面的瞬间。
- 父页监听
longtask类型条目，阈值设为 50ms，广告 SDK 很容易超 - 跨域 iframe 内部 timing 全为 0，
domainLookupStart、connectStart都不可信，别拿这些数据归因 - 验证是否真卡：打开 DevTools → Network → 找对应 iframe 请求 → 看 Timing 选项卡是否全空
- 线上采集建议 onload 后 1 秒内启动 observer，避免遗漏异步加载的广告脚本
最麻烦的不是查不到节点，而是查到了却不是你要的那个——广告脚本伪造结构比篡改结构更难防，得靠限定范围 + 路径缓存 + 主线程监控三手并用。
