JavaScript通过document.queryselector()和document.queryselectorall()方法获取符合css选择器的元素，前者返回首个匹配元素，后者返回所有匹配元素的nodelist；例如const buttons = document.queryselectorall(‘.btn’);可选取所有类名为.btn的按钮；若需操作单个元素如id为#main-header的标题，推荐使用queryselector()以提高效率；常见应用包括通过classlist.add()、classlist.remove()、classlist.toggle()添加、移除或切换类名，实现如菜单展开/收起或主题切换等功能；在事件绑定时，可结合matches()方法精准匹配目标元素，尤其适用于事件委托场景，比如判断点击是否发生在.delete-btn类元素上；需要注意的问题包括页面未加载完成导致元素未找到、动态生成内容未绑定事件、选择器拼写错误等，建议将脚本置于domcontentloaded事件中、对动态内容使用事件委托，并借助开发者工具检查选择器准确性。
在网页开发中，css选择器和JavaScript经常一起使用。虽然CSS负责样式控制，而JavaScript处理交互逻辑，但两者通过选择器实现了紧密配合。关键在于：用css选择器定位元素，再用JavaScript操作这些元素的行为或属性。
如何用JavaScript获取符合CSS选择器的元素？
JavaScript提供了两个非常方便的方法来根据CSS选择器查找元素：
- document.querySelector()：返回第一个匹配的元素
- document.querySelectorAll()：返回所有匹配的元素（NodeList）
比如你想选中页面上所有类名为.btn的按钮，可以这样写：
立即学习“Java免费学习笔记（深入）”；
const buttons = document.querySelectorAll('.btn');
这种方式非常直观，因为你可以直接复用你已经写的CSS选择器，不需要额外学习一套语法。
小技巧：如果只想要一个元素，比如某个ID为#main-header的标题，就用querySelector(‘#main-header’)，效率更高。
常见应用场景：添加/移除类名
很多前端效果是通过切换类名实现的，例如展开/收起菜单、切换暗色主题等。这时候就可以结合CSS选择器和JavaScript的classList方法来完成。
举个例子：
const menu = document.querySelector('.menu'); menu.classList.add('active'); // 添加类 menu.classList.remove('active'); // 移除类 menu.classList.toggle('active'); // 切换类
对应的CSS可能是这样的：
.menu { display: none; } .menu.active { display: block; }
这种写法的好处是把样式交给CSS处理，JS只负责状态切换，结构清晰又容易维护。
绑定事件时如何精准匹配目标元素？
在事件委托中，我们通常会监听一个父元素，然后根据事件对象的target判断具体点击的是哪个子元素。这个时候，CSS选择器可以帮助我们做更精确的匹配。
比如在一个列表里，只想对带有.delete-btn类的按钮执行删除操作：
document.querySelector('.list').addEventListener('click', function(e) { if (e.target.matches('.delete-btn')) { // 执行删除逻辑 } });
这里的matches()方法就是用来检查当前元素是否符合指定的CSS选择器。这个技巧特别适合动态生成内容的情况，避免重复绑定事件。
小心这些容易出错的地方
有时候我们会误以为选择器一定能找到元素，其实有几点需要注意：
- 页面还没加载完就执行JS代码，可能找不到元素
- 元素是动态生成的，一开始不存在于DOM中
- CSS选择器拼写错误，比如少了个点.或者多了一个空格
建议做法：
基本上就这些。CSS选择器和JavaScript配合起来不复杂，但理解清楚它们如何协同工作，能让你写出更简洁、高效的代码。
