最常见的querySelector错误是忘记加#或.导致返回null，应通过口诀记忆前缀规则、写完立即验证、用IDE插件高亮、对特殊ID转义或改用属性选择器、保存模板片段防手误。
忘记加点（.）或井号（#）是最常见的 querySelector 错误，直接导致返回 null，后续操作如 .style 或 .addEventListener 就会报“Cannot read property of null”。关键不是靠记忆，而是建立可落地的防错习惯。
用口诀固化前缀规则
把选择器前缀和目标特征强绑定：
- ID 必须带 # → 记作“ID 用井号，唯一性像钉子”
- Class 必须带 . → 记作“Class 用点号，批量性像散点”
- 标签名不加前缀 → 记作“纯标签无符号，找的是第一个同名元素”
写完立刻验证是否匹配
别等出错再查。每写一行 querySelector，顺手加一句检查：
const el = document.querySelector('#submit-btn');
console.assert(el, '❌ #submit-btn 未找到，请检查ID拼写和是否已渲染');
或者更轻量：在控制台快速试跑 document.querySelector('#xxx')，看返回是元素还是 null。
用 IDE 插件自动补全和高亮
VS Code 安装插件如 CSS Peek 或 Auto Rename Tag，能实时提示 CSS 选择器语法错误；部分插件还会对 .className 和 #idName 做颜色区分，一眼看出漏没漏符号。
对 ID 特殊字符提前防御
如果 ID 是动态生成的（比如后端返回的数字开头 ID：id="1234"），直接 querySelector('#1234') 会失败（HTML5 虽支持，但 CSS 选择器规范不认纯数字 ID）。安全做法是：
- 服务端输出时统一加前缀，如
id="cmt-1234" - 前端拼接时转义：用
document.querySelector('#' + CSS.escape(id))（现代浏览器支持） - 或改用属性选择器兜底：
document.querySelector('[id="1234"]')—— 这里引号必须有，且值要严格匹配
把常见错误变成模板片段
在编辑器中存几个常用片段，减少手写出错概率：
-
qs-id→document.querySelector('#${1:id}')$0 -
qs-class→document.querySelector('.${1:classname}')$0 -
qs-attr→document.querySelector('[${1:data-role}="${2:value}"]')$0
每次触发，光标自动停在占位符位置，强迫你填内容，而不是删改已有字符串。
