在JavaScript中操作网页元素的第一步就是获取对应的DOM元素，不同的获取方法适用于不同的场景，掌握这些方法能让后续的DOM操作更顺畅。
通过id获取元素
这是最常用的获取元素方式之一，通过元素的id属性值精准获取单个元素，方法为getElementById。
需要注意的是，id在页面中应该是唯一的，如果页面存在多个相同id的元素，该方法只会返回第一个匹配的元素。
// 获取id为container的元素
const container = document.getElementById('container');
// 判断元素是否存在
if (container) {
console.log('成功获取到container元素');
}通过类名获取元素
使用getElementsByClassName方法可以获取所有指定类名的元素，返回的是一个HTMLCollection集合，该集合是动态更新的，当页面中对应类名的元素发生变化时，集合内容也会同步变化。
// 获取所有类名为item的元素
const items = document.getElementsByClassName('item');
// 遍历集合打印元素内容
for (let i = 0; i < items.length; i++) {
console.log(items[i].innerText);
}通过标签名获取元素
getElementsByTagName方法可以获取所有指定标签名的元素，同样返回HTMLCollection集合，支持在指定父元素下查找，也可以直接在整个document下查找。
// 获取页面中所有的p标签元素
const pElements = document.getElementsByTagName('p');
// 获取id为list元素下的所有li标签
const list = document.getElementById('list');
const liElements = list.getElementsByTagName('li');通过CSS选择器获取元素
querySelector和querySelectorAll是基于CSS选择器获取元素的方法，灵活性更高，支持所有CSS选择器的语法。
querySelector：返回第一个匹配选择器的元素，如果没有匹配元素则返回nullquerySelectorAll：返回所有匹配选择器的元素，返回的是NodeList集合，该集合是静态的，不会随页面元素变化而更新
// 获取第一个类名为card的元素
const firstCard = document.querySelector('.card');
// 获取所有属性data-type为user的元素
const userElements = document.querySelectorAll('[data-type="user"]');
// 获取id为nav下的所有a标签
const navLinks = document.querySelectorAll('#nav a');不同方法的对比
为了更清晰地了解不同获取方法的差异，我们可以通过下表进行对比：
| 方法名 | 返回值类型 | 是否动态更新 | 适用场景 |
|---|---|---|---|
| getElementById | 单个元素/ null | 不涉及 | 获取唯一id的元素 |
| getElementsByClassName | HTMLCollection | 是 | 获取多个同类名元素 |
| getElementsByTagName | HTMLCollection | 是 | 获取多个同标签元素 |
| querySelector | 单个元素/ null | 不涉及 | 通过复杂选择器获取单个元素 |
| querySelectorAll | NodeList | 否 | 通过复杂选择器获取多个元素 |
使用注意事项
在获取DOM元素时，需要注意脚本的执行时机，如果脚本在DOM元素加载之前执行，会获取不到对应的元素。可以将脚本放在页面底部，或者使用DOMContentLoaded事件确保DOM加载完成后再获取元素。
// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
const target = document.getElementById('target');
console.log(target);
});另外，获取元素后最好先判断元素是否存在，再进行后续操作，避免出现空指针报错的情况。
JavaScriptDOMgetElementByIdquerySelector元素获取修改时间：2026-06-05 01:56:05