JavaScript DOM 操作：getElementById 与 querySelector

在网页开发中，经常需要通过 JavaScript 动态修改页面内容。这时就要用到“DOM 操作”——也就是操作网页的结构、样式或内容。其中最基础也最常用的操作，就是选中某个 HTML 元素。getElementById 和 querySelector 是两种最常见的选择元素的方法，它们都能完成任务，但适用场景和写法有明显区别。

何时使用 getElementById

前提条件：目标元素必须有一个唯一的 id 属性。

1. 打开你的 HTML 文件，找到你想操作的元素，例如：

   <div id="header">欢迎访问</div>

2. 在 JavaScript 中调用 document.getElementById，传入 id 值（不带 #）：

   const element = document.getElementById('header');

3. 验证是否成功获取：如果元素存在，element 就是一个真实的 DOM 对象；如果不存在（比如 id 写错），则返回 null。

4. 直接操作该元素，比如修改文字：

   element.textContent = '你好，世界！';

注意：id 在整个页面中必须唯一。如果有多个相同 id，浏览器行为不可靠，通常只返回第一个。

何时使用 querySelector

适用范围更广：不需要依赖 id，可以用 CSS 选择器语法选中任意元素。

1. 确定你要选中的元素特征，比如：

   • 类名为 .btn-primary
   • 第一个 <p> 标签
   • data-role="modal" 的元素

2. 使用 document.querySelector 并传入 CSS 选择器字符串：

   const button = document.querySelector('.btn-primary');
   const firstParagraph = document.querySelector('p');
   const modal = document.querySelector('[data-role="modal"]');

3. 它只返回第一个匹配的元素。即使页面上有多个 .btn-primary，也只拿到第一个。

4. 同样可以修改内容：

   button.style.backgroundColor = 'blue';

如果你想选中所有匹配的元素（比如全部按钮），要用 querySelectorAll，它返回一个类似数组的 NodeList。

核心区别对比

下面表格清晰列出两者的关键差异：

实际选择建议

优先用 getElementById 的情况：

• 你控制 HTML 结构，能给关键元素加唯一 id。
• 需要最高性能（比如高频操作的动画或交互）。
• 支持老旧浏览器（如 IE8 以下）。

优先用 querySelector 的情况：

• 元素没有 id，但有类名或其他特征。
• 需要根据复杂规则选元素（如 div > p:first-child）。
• 代码风格统一（全项目都用 CSS 选择器）。

常见错误与避坑指南

1. 混淆 id 和 # 前缀
   错误写法：document.getElementById('#header')
   正确写法：document.getElementById('header')
   而 querySelector 必须写：document.querySelector('#header')

2. 忽略返回 null 的风险
   如果元素还没加载就执行 JS，会得到 null，后续操作报错。
   安全做法：先判断是否存在：

   const el = document.getElementById('myDiv');
   if (el) {
     el.style.display = 'none';
   }

3. 误以为 querySelector 能选多个
   它只返回第一个。要选多个，请用：

   const allItems = document.querySelectorAll('.item');
   allItems.forEach(item => item.classList.add('highlight'));

4. 在动态内容中失效
   如果元素是后来通过 JS 添加的，确保查询代码在添加之后执行，否则找不到。

示例：切换主题按钮

假设页面有一个切换深色/浅色主题的按钮，HTML 如下：

<button id="theme-toggle">切换主题</button>
<div class="content">这里是内容</div>

用 getElementById 实现：

const btn = document.getElementById('theme-toggle');
btn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

用 querySelector 实现：

const btn = document.querySelector('#theme-toggle');
// 或者不用 id，改用类名
// const btn = document.querySelector('.theme-btn');

btn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

两种写法都能工作。但如果这个按钮可能有多个（比如页头和页脚各一个），就不能用 getElementById（因为 id 必须唯一），而 querySelector 只能控制第一个。此时应改用 querySelectorAll 并遍历绑定事件。

记住：没有绝对“更好”的方法，只有“更适合当前场景”的选择。当你能控制 HTML 结构时，给关键交互元素加上语义化的 id，并用 getElementById 获取，是最直接高效的做法。当面对第三方组件、动态模板或复杂布局时，querySelector 的灵活性就显得尤为重要。