querySelector 能选中所有符合 CSS 选择器语法的 DOM 元素，包括类名、ID、属性、伪类和组合器，但不支持伪元素；返回第一个匹配元素或 null。
querySelector 能选中哪些元素
querySelector 只返回第一个匹配的元素（null 表示没找到），它支持所有 CSS 选择器语法：类名 .btn、ID #header、属性 [data-id="123"]、伪类 :hover（但注意：运行时无法匹配动态状态，只匹配当前 DOM 结构）、组合器 nav > ul li a。不支持伪元素（如 ::before）——它们根本不在 DOM 树里，JS 拿不到。
为什么 document.querySelector() 有时返回 null
常见原因有三个：
• DOM 还没加载完就执行了查询，比如脚本放在 里且没加 defer 或事件监听；
• 选择器写错了，比如大小写不一致（class="MyClass" 却写成 .myclass）；
• 元素是异步插入的（比如 Vue 渲染后、AJAX 加载后），而查询发生在插入前。
验证方式很简单：
• 打开开发者工具，在控制台手动输入 document.querySelector("你的选择器") 看是否返回元素；
• 在 JS 中加一句 console.log(你的变量)，确认是不是 null。
querySelector 和 querySelectorAll 的关键区别
querySelector 返回单个 Element 或 null；querySelectorAll 返回 NodeList（类数组，不是 Array）。这意味着：
立即学习“Java免费学习笔记（深入）”；
-
querySelector(".item").addEventListener(...)可直接调用方法 -
querySelectorAll(".item")[0].addEventListener(...)需要下标取值才能操作单个 -
querySelectorAll(".item").forEach(...)可以遍历，但原生 NodeList 在旧版 Safari 中不支持forEach，稳妥写法是Array.from(list).forEach(...) - 性能上，如果只改第一个元素，
querySelector更轻量；如果要批量操作，querySelectorAll更合适
实际交互中容易忽略的细节
交互逻辑常踩这几个坑：
• 事件委托场景下，别对动态元素反复查 querySelector，应该绑定到父级并用 e.target.matches(".dynamic-btn") 判断；
• 修改样式时，别直接改 element.style.xxx 覆盖了 CSS 类，优先用 element.classList.add/toggle；
• 查询嵌套结构时，避免链式调用 el.querySelector(".child").querySelector(".sub")，改用更精确的选择器 el.querySelector(".child .sub")，减少出错可能；
• 如果 selector 含有变量，记得转义特殊字符，比如 id 带点号或冒号，要用 document.querySelector(`[id="${CSS.escape(id)}"]`)（需检查浏览器兼容性）。
最麻烦的其实是时机问题——DOM 就绪、框架渲染完成、第三方脚本注入节点，这些阶段不同，querySelector 的结果就可能不同。别假设“页面一打开就能拿到”。
