document.querySelector() CSS 选择器获取元素

最后更新：2026-09-09

querySelector 用 CSS 选择器获取第一个匹配的元素。比 getElementById 更灵活。

分类	DOM 操作
ES 版本	DOM

📝 语法

document.querySelector('CSS选择器');

selector	任意有效的 CSS 选择器。

返回值：第一个匹配的元素或 null。

是否修改原值：否（返回新值）

编辑下方代码，点击运行，在输出面板查看结果：

运行结果：

（元素或 null）

💡 提示 querySelector 支持所有 CSS 选择器——比 getElementById/getElementsByClassName 更通用。

ℹ️ info 只返回第一个匹配——需要全部用 querySelectorAll。

浏览器	Chrome	Edge	Firefox	Safari	Opera
document.querySelector()	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有现代浏览器均支持

更多实战案例即将上线，敬请期待。

QquerySelector 和 querySelectorAll 的区别？

AquerySelector 返回第一个匹配；querySelectorAll 返回所有匹配的 NodeList。

QquerySelector 支持哪些选择器？

A所有 CSS 选择器——id、class、属性、伪类、组合器。

QquerySelector 找不到元素返回什么？

A返回 null。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。