queryselector只返回第一个匹配元素或null，需判空处理；批量操作应使用queryselectorall；优先在局部容器内查找以提升准确性和性能；支持全部css选择器，需注意dom加载时机和选择器合法性。
querySelector 是前端开发中最常用、最灵活的 DOM 查找方法，它用 CSS 选择器语法直接定位元素，一条语句就能搞定多数场景。关键不是“会不会用”，而是“怎么用得准、稳、快”。
只认第一个，别指望它批量操作
它永远返回匹配项里的第一个元素，或 null —— 这是设计特性，不是 bug。误以为它能改所有 .item，结果只动了列表头一个，是新手最常踩的坑。
- 要批量处理，必须搭配 querySelectorAll + forEach 或 for...of
- 单个操作前务必判空：const btn = document.querySelector('.submit'); if (btn) { btn.disabled = true; }
- 用多个逗号分隔的选择器（如 'h1, h2, .title'）时，它只返回文档中**最先出现的那个匹配元素**，不是按选择器顺序选
缩小范围，查得更快更准
在全局 document 上大海捞针，不如先锁住局部容器再查。尤其页面结构复杂或动态渲染后，这能避免选错、提高性能。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 先获取父容器：const form = document.querySelector('form[data-type="login"]');
- 再在其内部查找：const emailInput = form?.querySelector('input[type="email"]');
- 嵌套层级深时，用后代选择器（空格）比链式调用更简洁：form.querySelector('div.controls button.save')
善用现代选择器，少写冗余代码
它支持全部标准 CSS 选择器，不必退化成老式 getElementById 或 getElementsByClassName。
- 属性存在即匹配：
document.querySelector('img[alt]')找所有带 alt 属性的图片 - 属性值精确匹配：
document.querySelector('a[href="/contact"]') - 状态伪类很实用：
document.querySelector('input:invalid')或button:not(:disabled) - 组合选择器直击目标：
article header h1比分开查 article → header → h1 更可靠
注意边界情况，防运行时报错
看似简单的方法，出错往往悄无声息——比如元素还没加载完就执行，或选择器拼错却没提示。
- 确保 DOM 加载完成：把 querySelector 放在
DOMContentLoaded事件里，或放在 script 标签底部 - 动态插入的元素，要在插入后才查询，不能提前缓存
- 选择器含非法字符（如未转义的点、括号）会抛 SYNTAX_ERR，调试时留意控制台
- 对返回结果不做假设，宁可多写一行 if 判空，也别让
.addEventListener绑在 null 上
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
