document.querySelector找不到权限按钮，主因是DOM未生成或被浏览器静默修正；需先验证结构真实性，再检查执行时机、框架挂载、非法嵌套、权限字段匹配及API响应处理。
权限拦截失效，90%不是逻辑写错，而是DOM还没生成或已被浏览器静默修正——先确认结构是否真实存在，再查JS执行时机。
为什么document.querySelector找不到权限按钮？
常见现象：HTML里写了<button id="delete-btn" data-permission="canDelete">删除</button>，但JS里document.getElementById("delete-btn")返回null。
- 页面是SPA，按钮由Vue/React异步渲染，脚本执行时DOM尚未挂载——改用
document.addEventListener("DOMContentLoaded", ...)或框架对应的生命周期钩子（如Vue的mounted） - 按钮被
v-if或{show && <button>}</button>动态控制，但权限字段初始为undefined，导致首次渲染被跳过 - HTML中存在非法嵌套（比如
<p></p> <div>...</div>），浏览器把<button></button>踢出<p></p>后变成孤立节点，getElementById仍能查到，但querySelector("p #delete-btn")就失效
权限字段从API取回但没生效？检查响应结构和解构方式
后端返回的权限字段名和前端代码不一致，是最隐蔽的失效原因。
立即学习“前端免费学习笔记（深入）”；
- 后端实际返回
{"permissions": {"delete": false, "reason": "dept_mismatch"}}，但JS里写的是const { canDelete, reason } = res——解构失败，canDelete为undefined - API返回的是数组形式
["view", "edit"]，但JS按对象判断if (res.canEdit)，永远为false - 未处理HTTP状态码：接口返回401/403时，
fetch().then()仍会进入then分支，但res.json()可能抛错，导致后续逻辑中断——必须加catch或用res.ok兜底
用<dialog></dialog>做权限提示却点不弹？关键属性漏了
<dialog></dialog>不会自动打开，也不会阻止ESC关闭——这两点漏掉一个，权限拦截就形同虚设。
- HTML中写了
<dialog id="perm-dialog">...</dialog>，但没调用myDialog.showModal()——open属性是只读的，写死open会导致页面加载即弹出，无法受控 - 没加
oncancel="event.preventDefault()"，用户按ESC直接绕过提示，继续执行敏感操作 - 对话框内按钮未绑定
data-action或未禁用确认按钮（如<button disabled>确定</button>），用户仍可点击提交
DOM结构异常导致权限逻辑整体失焦
浏览器对非法HTML静默修正后，你写的document.querySelectorAll("[data-permission]")可能查到一堆“幽灵节点”——它们有属性，但不在预期位置，事件监听无效。
- 运行
document.querySelectorAll('*').forEach(el => !el.parentElement && console.log('孤立:', el))，快速定位被踢出DOM树的权限相关元素 - 用W3C Validator（validator.w3.org）校验HTML源码，它会指出第一个非法嵌套位置，比如
<div>不能作为<code><p></p>的子元素——这类错误在DevTools里看不到报错，但会让closest("form")等向上查找全部失效 - 富文本插入权限按钮时，若服务端返回含
<script></script>或onerror的HTML，直接innerHTML = html会执行恶意代码，也破坏原有事件绑定
真正卡住调试的，往往不是权限判断逻辑本身，而是那个没被渲染出来的<button></button>，或者被浏览器悄悄挪走的<dialog></dialog>。先确认结构真实存在且位置正确，再谈JS怎么跑。
