JavaScript中如何操作DOM_getElementById和querySelector

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、p、[data-id="123"]、button:hover 等多种写法
• ID选择器也要加 #，比如 querySelector('#submit-btn')
• 语法更接近CSS，学习成本低，适合复杂定位

✅ 常见用法示例：
document.querySelector('.nav-link');
document.querySelector('input[type="email"]');
document.querySelector('#header .title');

标签： css javascript java node ai 区别 css选择器 id选择器