querySelector返回首个匹配元素，querySelectorAll返回静态NodeList；均基于CSS选择器，不支持XPath或:contains()，需严格遵循CSS语法，伪元素不可选，伪类需满足实时状态，返回值需判空或用length检查。
querySelector 返回匹配选择器的第一个元素，querySelectorAll 返回所有匹配元素的静态 NodeList。二者都基于 CSS 选择器语法，不支持 XPath 或自定义伪类（如 :contains()），且作用域限定在调用对象的后代节点（包括自身，若匹配）。
选择器写法必须符合 CSS 规范
不能省略标签名前的符号：类名要加 .（如 '.btn'），ID 要加 #（如 '#header'），属性选择器用方括号（如 '[data-id="123"]'）。复合选择器可连写，例如：
document.querySelector('div.content > p:first-child')document.querySelectorAll('button[data-action][disabled]')
注意：伪元素（如 ::before）不可选中；部分伪类（如 :nth-of-type(2n)）可用，但 :focus 等动态状态需元素当前满足条件才匹配。
作用域和返回值差异要明确
querySelector 找不到时返回 null，使用前应判空；querySelectorAll 总返回 NodeList（哪怕为空），可用 .length 判断是否存在匹配项。
立即学习“Java免费学习笔记（深入）”；
- 安全取值写法：
const el = document.querySelector('.item'); if (el) { el.classList.add('active'); } - 遍历多个元素：
document.querySelectorAll('.card').forEach(card => card.hidden = true);
NodeList 是只读静态集合，不随 DOM 变化自动更新，适合一次性操作。
性能与适用场景建议
单个目标优先用 querySelector，语义清晰且开销略小；批量操作统一用 querySelectorAll，避免重复查询。避免在循环中反复调用（如 for (let i=0; i），应提前缓存结果。
- 推荐：
const buttons = document.querySelectorAll('form button');再遍历 - 不推荐：
for (let i = 0; i （应改用 <code>document.querySelectorAll('[id^="item-"]')）
深层嵌套选择器（如 'body div ul li a span.text'）影响性能，尽量用语义化类名缩短路径。
兼容性与常见陷阱
IE8+ 支持基础选择器（.class、#id、[attr]），但不支持 :nth-child、:not(.x) 等较新语法。现代项目可放心使用，但需注意构建工具是否处理兼容性。
- 错误写法：
document.querySelector('div:has(p)')（:has()尚未广泛支持） - 错误写法：
document.querySelector('input[type=text]')（应加引号：'input[type="text"]'） - 注意大小写：
'[data-role="Sidebar"]'区分大小写，HTML 属性默认小写，建议统一用小写定义
不复杂但容易忽略。
