querySelector用于通过CSS选择器精准获取第一个匹配元素，支持ID、类、属性、伪类及组合选择器，语法简洁、复用性强，返回null需校验，性能优于传统DOM方法。
直接用 CSS 选择器语法就能精准定位，不需要额外封装或分步查找。querySelector 的设计初衷就是复用你 already 熟悉的 CSS 规则，写法一致、语义清晰、组合自由。
层级关系：空格和 > 各有分工
空格表示“后代”，不关心中间隔了几层，只要路径成立就匹配。比如 .sidebar nav ul li a 能命中任意嵌套深度下的链接。
> 表示“直接子元素”，强制限定紧邻下一级。例如 .form > .field > input 只会选表单第一层 field 里的 input，跳过嵌套更深的同类结构。
- 宽松匹配用空格：适合结构可能变化但语义稳定的场景
- 严格限制用
>：适合需要排除干扰、避免误选的情况
多特征组合：类名、属性、伪类一起上
靠单一条件容易撞车，加几个限定词就能大幅提高唯一性。比如 button[data-action="save"].primary:enabled 同时约束行为、样式状态和可用性。
立即学习“前端免费学习笔记（深入）”；
动态生成的内容常用 [data-id] 或 [data-uid] 定位；带序号的列表可配合 :nth-child(2)，但要注意它依赖 DOM 顺序，结构变动时易失效。
- 优先用属性值锁定：如
input[name="email"] - 用伪类过滤状态：
:checked、:focus-within、:not(.hidden) - 多个类名连写更安全：
.modal.is-open .dialog .btn.confirm
调试建议：先在控制台验证再写进代码
别凭感觉写完就跑。打开浏览器 DevTools → Console，粘贴你的选择器，用 $$("你的选择器")（Chrome/Firefox）快速看匹配到哪些节点；用 document.querySelector("...") 看是否真能取到目标元素。
如果返回 null，常见原因是：选择器写错、元素还没加载、执行时机太早（比如脚本放在 head 里但 DOM 还没解析）、或者目标在 shadow DOM 里（需换用 shadowRoot.querySelector）。
- 确保 DOM 已就绪：把脚本放 body 底部，或监听
DOMContentLoaded - 检查大小写和引号：CSS 类名区分大小写，字符串必须用引号包裹
- 避免过度嵌套：写太长的选择器不仅难维护，还容易因某一层缺失而整体失效
和其他方法对比：为什么推荐 querySelector
相比 getElementById 或 getElementsByClassName，querySelector 支持全部 CSS 选择器语法，不用为不同筛选条件切换 API。一个方法覆盖 ID、类、标签、属性、组合、伪类等所有情况。
它返回的是单个元素（没找到是 null），比 querySelectorAll 更轻量，也比老式方法更贴近现代开发习惯——尤其是当你已经在写 CSS 的时候，选择器逻辑可以直接复用。
- 查单个元素：首选
querySelector - 查多个元素：用
querySelectorAll，再用forEach或展开运算符处理 - 性能敏感场景：ID 选择器（
#id）最快，但灵活性远不如组合选择器
