1. 基本用法与选择器解析
1) 概念与差异
在前端开发中，document.querySelector 系统地按照 CSS 选择器来定位页面中的第一个匹配元素；而 document.querySelectorAll 会返回所有匹配的元素集合。前者返回单个 Element，后者返回一个 NodeList，需要通过索引或迭代来访问各个节点。
理解两者的返回类型差异对于后续的循环、缓存以及事件绑定非常关键，因为 NodeList 并非数组，但具备长度属性和索引访问能力。通常在需要快速定位一个目标时选择 querySelector，而需要处理一组元素时才选用 querySelectorAll。
在实际使用中，你还需要注意 浏览器对 CSS 选择器的支持程度，以及在复杂选择时的性能开销。现代浏览器对常用选择器的支持很广，但极端复杂的选择仍可能触发较高的匹配成本。
// 取第一个链接元素
const firstLink = document.querySelector('a.link');
// 取所有导航项中的第一个活动项
const activeNav = document.querySelectorAll('.nav-item.active')[0];
2) 常用的 CSS 选择器语法
#id、.class、tag、以及属性选择器 [attr=value] 都可以直接用于查询。组合使用也非常强大，能够实现精准定位。
例如，通过组合选择器可以快速定位特定结构中的元素，提升代码简洁性与可维护性。请将 CSS 选择器理解为你在 DOM 树中发出的“查询语句”，浏览器负责执行实际匹配。
// 在 #menu 中查找带有 .item 且处于活动状态的元素
const current = document.querySelector('#menu .item.active');另一种典型用法是从任意父容器中查询子元素，避免全局搜索带来的性能损耗。示例展示了使用限定作用域来缩小匹配范围。
// 在某个区域内部查询
const container = document.querySelector('.content');
const highlighted = container.querySelector('.highlighted');
3) 处理返回值的常见姿势
当你需要处理多条匹配结果时，推荐使用 NodeList 进行遍历处理。虽然 NodeList 不是数组，但你可以通过 Array.from 或者展开运算符将其转换为数组以获得更丰富的数组方法。
另外，若你只关心数量或某个具体位置的元素，直接使用下标访问即可。请牢记：querySelectorAll 是静态快照（非实时更新），除非重新执行查询，否则 NodeList 不会随 DOM 变化自动更新。
// 多元素遍历
const items = document.querySelectorAll('.section-item');
items.forEach(item => {
item.classList.add('processed');
});
// 将 NodeList 转换为数组后使用数组方法
const itemsArray = Array.from(items);
2. 选择器的实战应用场景
1) 快速定位：ID、类名、属性选择
在日常开发中，快速定位元素是提升用户体验和开发效率的关键。使用 ID、类名以及属性选择可以实现高效且可维护的查询逻辑。通过这些选择器你可以避免冗长的遍历逻辑。
示例中，若你需要定位具有特定数据属性的按钮，以触发自定义行为，属性选择器就显得十分自然。将选择器设计为自解释的短语，有助于团队理解与维护。
结合调试，避免依赖全局标签名查询，尽量将查询限定在具体容器内，以降低不必要的匹配成本。
// 通过 ID 定位
const mainHeader = document.querySelector('#main-header');
// 通过数据属性定位
const saveBtn = document.querySelector('button[data-action="save"]');
2) 组合选择器：父子、后代、伪类
组合选择器让你以更具表达力的方式描述 DOM 结构：父子、后代关系以及伪类状态等都可以成为查询条件。这样可以避免额外的遍历逻辑，并直接定位到目标节点。
例如，选择某个导航条中处于活动状态的链接，或者在特定区域内查找第一个可聚焦的元素，这些场景都可以通过组合选择器实现。
在实践中，你应关注选择器的可读性与维护性，避免过度嵌套的复杂选择，导致调试困难以及潜在的性能隐患。
// 组合示例：父容器内的活动链接
const activeLink = document.querySelector('#sidebar ul > li.active a');
3. 性能与兼容性考量
1) 性能要点：缓存与一次查询
缓存查询结果是提升性能的关键做法之一。频繁在同一个区域执行 querySelector / querySelectorAll 会产生重复工作，尤其在复杂 DOM 结构中。将结果缓存到变量中，后续直接使用，可显著减少重排与重绘的成本。
同时，尽量避免在高频事件回调中进行全局查询（如滚动、输入联想等场景），可结合节流与防抖策略，降低查询频率。
如果需要跨多个区域工作，考虑以父容器为起点进行查询，限定查询域可以显著降低浏览器的匹配范围。
// 缓存一次性查询的结果
const header = document.querySelector('#header');
const navItems = header.querySelectorAll('.nav-item');
2) 兼容性与回退策略
大多数现代浏览器都对 querySelector 与 querySelectorAll 提供了良好支持，但在老版本浏览器中可能存在差异。因此在关键路径上，建议进行简单的兼容性测试并提供回退方案。
若需在极早期浏览器中运行，考虑使用轻量的选择器替代方案或实现最小限度的选择器查询，并在代码中包含对 document.querySelector 的存在性检查。对于复杂选择，谨慎评估降级策略。
if (document.querySelector) {
const el = document.querySelector('.may-not-be-supported');
} else {
// 回退方案：直接通过 getElementById 或 getElementsByClassName 等简单查询
const el = document.getElementById('fallback');
}
4. 动态内容与事件代理的查询
1) 动态创建后如何查询
在 SPA 或动态渲染的场景中，页面会不断新增、修改组件。此时你需要确保新创建的节点能够被后续的查询操作正确定位。最直接的做法是在创建后立即使用 querySelector / querySelectorAll 查询新节点，或者将引用缓存到数据结构中供后续访问。
若内容的增删较为频繁，考虑使用 MutationObserver 监控 DOM 变动，并在变动后触发相应的查询与处理逻辑，确保界面状态的一致性。
const list = document.querySelector('#dynamic-list');
const observer = new MutationObserver(() => {
// 新增节点后执行查询或绑定事件
const newItems = list.querySelectorAll('.item');
// 处理新元素
});
observer.observe(list, { childList: true, subtree: true });
2) 事件代理与查询的结合
直接在大量子元素上绑定事件通常会带来性能问题。通过事件代理，你可以在父容器上统一监听事件并在事件冒泡阶段根据目标元素进行识别。这与 querySelector 的能力相辅相成，能够在动态内容中保持高效的事件绑定。
一个常见模式是利用 Event delegation，结合 closest 方法快速定位最近的匹配父级，从而确定要处理的目标。
document.addEventListener('click', function(e){
const item = e.target.closest('.list-item');
if (item) {
// 在此处处理点击事件
item.classList.toggle('selected');
}
});
