JavaScript中document.querySelector方法使用CSS选择器查找元素详解

列表下第一个直接的子级
• 项目。
• 属性选择器：例如，定位所有类型为邮箱的输入框，可以使用 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() 通常是更安全、更快速的选择。