如何在 JavaScript 中利用 document.querySelector() 使用 CSS 选择器找元素
在网页开发中，精准定位并操作特定元素是核心任务之一。document.querySelector() 方法凭借其强大的 CSS 选择器支持，成为实现这一目标的利器。它允许开发者直接运用熟悉的 CSS 选择器语法来查找 DOM 元素，无需额外学习新规则，极大地提升了开发效率与代码可读性。
基础用法：按标签、类名、ID 查找
该方法的使用方式直观易懂，与编写 CSS 选择器规则完全一致：
- 查找特定标签元素：例如，获取页面中第一个
元素，使用document.querySelector('div')。 - 查找特定类名元素：要定位 class 属性为 “btn” 的第一个元素，代码为
document.querySelector('.btn')。 - 查找特定 ID 元素：对于 id 为 “header” 的唯一元素，使用
document.querySelector('#header')即可精准获取。
组合与进阶选择器：提高定位精度
面对复杂的页面结构，基础选择器可能力有不逮。幸运的是，querySelector() 全面支持 CSS 的复合与高级选择器，实现更精细的元素定位：
- 后代选择器（空格）：
document.querySelector('na v a')会返回嵌套在链接。 - 子元素选择器（>）：
document.querySelector('ul > li:first-child')专门用于查找项目。 - 属性选择器：例如，定位所有类型为邮箱的输入框，可以使用
document.querySelector('input[type="email"]')。 - 伪类选择器：
document.querySelector('button:disabled')能够轻松选中当前处于禁用状态的按钮。
注意事项：只返回第一个匹配项
使用 querySelector() 时，一个至关重要的特性是：它仅返回文档中第一个匹配指定选择器的元素节点。如果未找到任何匹配项，则返回 null。 它不会返回包含多个元素的集合。
因此，当你需要选中并操作页面上所有符合某个条件的元素时，应当使用其配套方法 document.querySelectorAll()。该方法会返回一个包含所有匹配元素的 NodeList 集合。
通过以下场景对比可以清晰理解两者的区别：
- 常见误区：
document.querySelector('.item').innerText = 'hello';—— 这行代码只会修改第一个类名为 .item 的元素内容。 - 批量操作方案：
document.querySelectorAll('.item').forEach(el => el.innerText = 'hello');—— 这样才能遍历并更新所有匹配的 .item 元素。 - 健壮性检查：由于可能返回 null，在直接操作结果前进行判断是良好的编程习惯，可以避免脚本错误。例如：
const el = document.querySelector('.modal'); if (el) { el.style.display = 'block'; }
实战小技巧：动态拼接与作用域限定
掌握基础后，以下实战技巧能帮助你更高效、更安全地运用 querySelector()：
- 作用域限定查找：你可以在一个已获取的 DOM 元素上再次调用
querySelector，实现局部范围内的精确查找。这不仅能提升查询性能，还能避免选择器冲突。示例：const card = document.querySelector('.card'); const btn = card.querySelector('button.delete'); - 动态拼接选择器：当选择器字符串需要包含变量时，可以使用模板字符串进行拼接。但务必注意对变量中的特殊字符进行适当转义，以确保选择器语法正确。
const id = 'user-123'; document.querySelector(`[data-id="${id}"]`); - 安全边界提醒：最后，必须警惕一个重要的安全原则：切勿将未经净化的用户输入直接拼接成选择器字符串，这可能引发严重的安全漏洞，如 CSS 注入攻击。对于已知且确定的 ID 查找，使用
document.getElementById()通常是更安全、更快速的选择。
