在前端开发中，操作HTML页面元素的第一步就是获取对应的DOM对象，getElementById和querySelector是原生JavaScript提供的两种核心元素获取方法，二者在使用规则和适用场景上存在明显差异，掌握它们的用法是前端开发的基础能力。
getElementById方法详解
getElementById是Document对象的内置方法，专门用于通过元素的id属性值获取对应的DOM元素，是最早期就存在的DOM操作方法之一。
语法规则
该方法只有一个参数，即目标元素的id属性值，不需要添加#前缀，返回值是对应的DOM元素对象，如果页面中没有匹配id的元素，则返回null。
// 获取id为username的元素
const userElement = document.getElementById('username');
// 判断元素是否存在
if (userElement) {
console.log('成功获取到元素', userElement);
} else {
console.log('未找到对应id的元素');
}
使用注意事项
- id属性值在HTML页面中应该是唯一的，如果出现多个相同id的元素，getElementById只会返回第一个匹配的元素。
- 参数直接传入id字符串，不需要加
#前缀，加前缀会导致无法匹配到元素。 - 该方法只能在Document对象上调用，无法在普通元素对象上调用，比如不能通过某个div元素调用getElementById获取它的子元素。
querySelector方法详解
querySelector是后期加入DOM标准的方法，支持使用CSS选择器语法获取元素，比getElementById更加灵活，适用性更广。
语法规则
该方法接收一个CSS选择器字符串作为参数，返回页面中第一个匹配该选择器的元素，如果没有匹配元素则返回null。如果需要获取所有匹配的元素，可以使用querySelectorAll方法，返回的是NodeList集合。
// 通过id选择器获取元素，需要加#前缀
const userElement = document.querySelector('#username');
// 通过class选择器获取第一个匹配的元素
const firstItem = document.querySelector('.list-item');
// 通过标签选择器获取第一个p元素
const firstP = document.querySelector('p');
// 获取所有class为list-item的元素
const allItems = document.querySelectorAll('.list-item');
使用注意事项
- 选择器语法需要和CSS选择器完全一致，比如id选择器要加
#，class选择器要加.。 - 该方法不仅可以在Document对象上调用，也可以在普通元素对象上调用，用于获取该元素的后代元素。
- 如果选择器语法错误，方法会直接抛出语法错误异常，使用前需要确保选择器写法正确。
两种方法的对比与选择
为了更清晰地了解两种方法的差异，我们可以通过下表进行对比：
| 对比维度 | getElementById | querySelector |
|---|---|---|
| 参数规则 | 直接传入id字符串，无前缀 | 传入CSS选择器字符串，id需加#前缀 |
| 选择器支持 | 仅支持id选择 | 支持所有CSS选择器（id、class、标签、属性选择器等） |
| 调用范围 | 仅能在Document对象调用 | 可在Document或普通元素对象调用 |
| 返回值 | 单个元素或null | 单个元素或null（querySelectorAll返回NodeList） |
| 性能表现 | 性能略高，因为是直接通过id映射查找 | 性能稍低，因为需要解析选择器语法 |
选择建议
- 如果明确要获取id对应的元素，优先使用getElementById，性能更好且写法更简单。
- 如果需要使用class、标签、属性等选择器获取元素，或者需要在某个元素的后代中查找元素，使用querySelector或querySelectorAll。
- 如果页面中需要兼容非常老的浏览器（如IE7及以下），需要注意querySelector在这些浏览器中不被支持，此时只能使用getElementById等早期方法。
常见错误示例
开发者在使用这两种方法时经常会犯一些典型错误，以下是常见错误及修正方式：
// 错误1：getElementById参数加了#前缀
const wrong1 = document.getElementById('#username'); // 返回null，正确写法去掉#
// 错误2：querySelector获取id元素没加#前缀
const wrong2 = document.querySelector('username'); // 返回null，正确写法加#
// 错误3：在元素上调用getElementById
const div = document.querySelector('div');
const wrong3 = div.getElementById('child'); // 报错，getElementById只能在document上调用
// 错误4：querySelectorAll之后直接用数组方法
const items = document.querySelectorAll('.item');
// items.forEach is not a function（旧浏览器中NodeList没有forEach方法）
// 修正方式：转成数组或者使用for循环
const itemArray = Array.from(items);
itemArray.forEach(item => console.log(item));
注意：获取DOM元素的代码需要放在元素加载完成之后执行，如果脚本放在<head>标签中，需要将代码放在DOMContentLoaded事件的回调中，或者将脚本放在<body>标签末尾，避免获取不到元素的问题。
getElementByIdquerySelectorHTML_DOM元素获取修改时间：2026-07-12 22:03:30