在前端页面开发过程中，我们常常需要根据元素的某个属性值来定位目标元素，然后对其类名进行修改，从而实现样式切换或者功能标记的效果。下面介绍几种常用的实现方式。
方法一：使用属性选择器直接查找
如果元素的属性值是明确的，我们可以直接使用CSS属性选择器配合querySelector或者querySelectorAll方法来查找元素，之后修改类名。
假设页面中有如下结构的元素：
<div data-type="active" class="item">元素1</div> <div data-type="normal" class="item">元素2</div> <div data-type="active" class="item">元素3</div>
我们要查找所有data-type属性值为active的元素，为其添加highlight类名，代码如下：
// 查找所有data-type为active的元素
const targetElements = document.querySelectorAll('[data-type="active"]');
// 遍历元素修改类名
targetElements.forEach(element => {
element.classList.add('highlight');
});
方法二：遍历元素集合匹配属性值
当属性值需要动态判断，或者属性选择器的匹配规则无法满足需求时，我们可以先获取所有同类元素，再遍历每个元素获取属性值进行判断，最后修改类名。
还是以上面的HTML结构为例，查找data-type为active的元素修改类名：
// 获取所有class为item的元素
const allItems = document.getElementsByClassName('item');
// 遍历元素
for (let i = 0; i < allItems.length; i++) {
const currentElement = allItems[i];
// 获取data-type属性值
const dataType = currentElement.getAttribute('data-type');
// 判断属性值是否符合条件
if (dataType === 'active') {
// 修改类名，添加highlight，移除normal
currentElement.classList.add('highlight');
currentElement.classList.remove('normal');
}
}
方法三：使用find方法查找单个元素
如果只需要查找第一个符合条件的元素，可以结合Array.from将元素集合转为数组，再使用find方法查找。
// 获取所有item元素转为数组
const itemArray = Array.from(document.getElementsByClassName('item'));
// 查找第一个data-type为active的元素
const firstActiveElement = itemArray.find(element => {
return element.getAttribute('data-type') === 'active';
});
if (firstActiveElement) {
// 修改类名
firstActiveElement.classList.add('highlight');
}
不同方法的适用场景对比
我们可以通过下面的表格了解不同方法的适用场景：
| 方法 | 适用场景 | 性能表现 |
|---|---|---|
| 属性选择器查找 | 属性值固定，需要批量查找符合条件的元素 | 较高，由浏览器原生支持选择器匹配 |
| 遍历元素匹配 | 属性值需要动态判断，或者匹配规则复杂 | 中等，需要遍历元素并逐个判断 |
| find方法查找单个 | 只需要查找第一个符合条件的元素 | 中等，需要转换数组再查找 |
注意事项
- 使用
getAttribute获取不存在的属性时，会返回null，判断时需要做好兼容处理，避免出现运行时错误。 classList的add方法如果添加已经存在的类名，不会重复添加，无需提前判断类名是否存在。- 如果属性值是动态的，需要注意属性值中的特殊字符，避免属性选择器匹配出错，此时优先选择遍历匹配的方式。
JavaScriptgetAttributequerySelectorclassList属性选择器修改时间：2026-07-06 08:51:13