JS如何获取DOM元素？DOM元素获取的5种常用方法有哪些

在前端开发中，JavaScript操作DOM元素前首先需要获取对应的元素对象，不同的获取方法有不同的适用场景和返回值特性，下面介绍5种常用的DOM元素获取方法。

1. getElementById方法

这是最常用的获取单个元素的方法，通过元素的id属性值来获取对应的DOM元素，id在页面中应该是唯一的，所以该方法返回的是单个元素对象，如果找不到对应id的元素则返回null。

// 获取id为container的元素
const container = document.getElementById('container');
if (container) {
    console.log('获取到元素：', container);
} else {
    console.log('未找到对应元素');
}

2. getElementsByClassName方法

该方法通过元素的class属性值获取元素，返回的是一个HTMLCollection集合，这个集合是动态更新的，后续页面中新增或删除对应class的元素时，集合会自动变化。如果找不到对应class的元素，返回空集合。

// 获取所有class为item的元素
const items = document.getElementsByClassName('item');
console.log('元素数量：', items.length);
// 遍历集合
for (let i = 0; i < items.length; i++) {
    console.log('第' + (i + 1) + '个元素：', items[i]);
}

3. getElementsByTagName方法

该方法通过元素的标签名获取元素，比如获取所有的<div>、<p>标签元素，返回的同样是动态的HTMLCollection集合，找不到元素时返回空集合。

// 获取页面中所有的p标签元素
const pTags = document.getElementsByTagName('p');
console.log('p标签数量：', pTags.length);

4. querySelector方法

该方法支持传入CSS选择器作为参数，返回第一个匹配选择器的元素对象，如果找不到则返回null。它可以使用任意合法的CSS选择器，比如类选择器、后代选择器、属性选择器等，使用起来非常灵活。

// 获取第一个class为card的元素
const firstCard = document.querySelector('.card');
// 获取id为header下的第一个a标签
const headerLink = document.querySelector('#header a');
// 获取data-type属性为active的元素
const activeEle = document.querySelector('[data-type="active"]');

5. querySelectorAll方法

该方法同样支持CSS选择器作为参数，返回所有匹配选择器的元素组成的NodeList集合，这个集合是静态的，不会随页面元素变化而自动更新。如果找不到匹配元素，返回空NodeList。

// 获取所有class为list-item的元素
const listItems = document.querySelectorAll('.list-item');
console.log('匹配元素数量：', listItems.length);
// 使用forEach遍历NodeList
listItems.forEach((item, index) => {
    console.log('第' + (index + 1) + '个列表项：', item);
});

方法对比

可以通过下面的表格快速了解不同方法的差异：

使用建议

如果只需要获取单个有明确id的元素，优先使用getElementById，性能相对更好；如果需要使用复杂的选择规则获取元素，优先使用querySelector和querySelectorAll，灵活性更高；如果需要获取某一类元素且后续需要动态监听元素变化，可以使用getElementsByClassName或getElementsByTagName。

DOMJavaScriptgetElementByIdquerySelectorgetElementsByClassName修改时间：2026-07-14 10:54:28