getElementById只通过ID查找单个元素且不加#号，性能高；querySelector支持CSS选择器（ID需加#），灵活但只返回首个匹配元素；按需选用，ID定位优先用前者，复杂选择用后者。
在JavaScript中，getElementById 和 querySelector 都是用来获取页面中DOM元素的方法，但它们的用法、灵活性和适用场景有明显区别。掌握它们的核心差异和正确写法，能帮你更高效、更安全地操作页面元素。
getElementById：只认ID，快而专一
getElementById 是最老也最快的DOM查找方法之一，它**只通过元素的 id 属性查找**，且返回单个元素（找不到时返回 null）。
ID 在整个页面中必须唯一，所以它天然保证最多返回一个元素 不支持CSS选择器语法，只能传纯字符串ID（不带 #） 性能通常优于 querySelector，尤其在大型页面中
✅ 正确写法：const btn = document.getElementById('submit-btn');
❌ 错误写法：document.getElementById('#submit-btn'); // 多写了 #，会返回 null
querySelector：灵活强大，支持CSS选择器
querySelector 更现代、更通用，它接受任意合法的CSS选择器（如类名、标签、属性、伪类等），**只返回第一个匹配的元素**（没找到也返回 null）。
支持 .class、div、[data-id="123"]、button:hover 等多种写法 ID选择器也要加 #，比如 querySelector('#submit-btn') 语法更接近CSS，学习成本低，适合复杂定位
✅ 常见用法示例：document.querySelector('.nav-link');document.querySelector('input[type="email"]');document.querySelector('#header .title');
选哪个？看需求，不是越新越好
不用强行统一，按实际需要选：
立即学习“Java免费学习笔记（深入）”；
明确知道要找的是某个ID元素 → 优先用 getElementById（语义清晰、性能好） 要根据类、属性、结构关系或动态条件找元素 → 必须用 querySelector 需要找所有匹配项 → 改用 querySelectorAll（返回NodeList） 注意：两者都只在调用时实时查找，不自动响应DOM变化
安全操作小提醒
无论用哪个方法，拿到元素后别急着操作，先判断是否存在：
if (btn) { btn.addEventListener('click', handler); } 避免 Cannot read property 'xxx' of null 报错 确保脚本执行时DOM已加载（放在
以上就是JavaScript中如何操作DOM_getElementById和querySelector的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543943.html
微信扫一扫 
支付宝扫一扫 
