JavaScript querySelector()、querySelectorAll() CSS选择器解析（DOM元素选择）

基于querySelector系列方法的CSS选择器深度解析

一、方法概述

const element = document.querySelector(selector);
const elements = document.querySelectorAll(selector);

• querySelector()返回匹配的第一个元素
• querySelectorAll()返回NodeList集合
• 参数接受标准CSS选择器语法
• 支持在任意Element节点上调用

二、基础选择器类型

1. 类型选择器

document.querySelector('div') // 匹配第一个<div>
document.querySelectorAll('p') // 所有<p>元素

2. ID选择器

document.querySelector('#main-header') // ID需唯一
document.querySelector('div#content') // 带标签限制

3. 类选择器

document.querySelectorAll('.active') // 所有含active类的元素
document.querySelector('button.primary') // 带标签限制

4. 属性选择器

/* 完整匹配 */
[type="submit"]

/* 包含匹配 */
[class*="btn"]

/* 开头匹配 */
[href^="https"]

/* 结尾匹配 */
[src$=".png"]

/* 空格分隔包含 */
[lang~="en"]

示例：

document.querySelector('a[target="_blank"]') // 新窗口打开的链接
document.querySelectorAll('input[type^="date"]') // 日期相关输入框

三、组合选择器

1. 后代组合器

document.querySelectorAll('nav ul li') // 所有nav下的ul中的li

2. 子元素组合器

document.querySelector('div > .content') // 直接子元素

3. 相邻兄弟组合器

document.querySelector('h2 + p') // 紧接在h2后的p元素

4. 通用兄弟组合器

document.querySelectorAll('h3 ~ div') // h3之后的所有同级div

四、伪类与伪元素

1. 结构伪类

document.querySelector('li:nth-child(2n+1)') // 奇数行列表项
document.querySelectorAll('tr:nth-of-type(even)') // 偶数行表格行

2. 状态伪类

document.querySelector('input:disabled') // 禁用输入框
document.querySelectorAll('a:visited') // 已访问链接

3. 内容伪类

document.querySelector('p:empty') // 无内容的段落
document.querySelector('div:has(> img)') // 包含直接子图片的div

4. 伪元素

document.querySelector('p::first-line') // 无效选择，伪元素不可匹配

五、高级选择技巧

1. 多重选择

document.querySelectorAll('h1, h2, h3') // 所有标题元素

2. 转义特殊字符

document.querySelector('#user\\.name') // 转义特殊字符

3. 动态选择器拼接

const type = 'success';
document.querySelector(`.alert-${type}`) // 模板字符串拼接

六、DOM操作实践示例

1. 动态样式修改

document.querySelector('.chart-bar:nth-child(3)')
  .style.backgroundColor = '#ff4757';

2. 批量元素操作

document.querySelectorAll('.data-table tr:not(:first-child)')
  .forEach(row => {
    row.classList.add('highlight');
  });

3. 表单验证增强

document.querySelectorAll('input:invalid').forEach(input => {
  input.parentElement.classList.add('error');
});

七、性能注意事项

1. 选择器复杂度控制：避免超过三层嵌套
2. 作用域优化：优先在最近父元素查询
3. 缓存结果：重复使用查询结果
4. 伪实时性：NodeList不会自动更新
5. 特殊字符处理：需正确转义CSS保留字符

八、浏览器支持情况

选择器类型	支持版本
:focus-within	Chrome 64+
:has()	Chrome 105+
:is()	Chrome 88+
:where()	Chrome 88+

通过合理运用CSS选择器语法，可以实现精确的DOM元素定位。建议优先使用简单选择器组合，在复杂场景下可结合现代CSS伪类保持代码可维护性。