如何正确获取被点击元素的 data-value 值并实现单选高亮

在前端交互开发中，我们经常需要处理列表项的点击逻辑，既要获取元素上挂载的自定义数据，又要实现点击后当前项高亮、其他项恢复默认状态的单选效果，其中获取data-value属性和控制高亮状态是两个核心环节。

一、获取data-value值的核心方法

HTML5规范中，自定义数据属性以data-为前缀，获取这类属性的值有两种常用方式，其中dataset是更符合规范的做法。

1.1 使用dataset属性获取

每个DOM元素都有dataset属性，它是一个DOMStringMap对象，存储了元素上所有data-开头的自定义属性，属性名会自动去掉data-前缀，并且如果原属性名有连字符，会转换为驼峰命名。

例如元素上有data-value="123"属性，那么通过element.dataset.value就可以直接获取到值"123"。

1.2 使用getAttribute方法获取

也可以通过getAttribute方法直接传入完整的属性名获取，比如element.getAttribute('data-value')，这种方式兼容性更好，但需要手动写完整的属性名。

二、原生JavaScript实现单选高亮逻辑

实现单选高亮的核心思路是：先给所有可选元素添加点击事件，点击时先清除所有元素的高亮类名，再给当前点击的元素添加高亮类名，同时获取当前元素的data-value值。

为了避免给每个元素单独绑定事件，我们可以使用事件委托，把点击事件绑定到父容器上，通过事件冒泡机制处理子元素的点击。

2.1 HTML结构示例

<div class="list-container">
  <div class="list-item" data-value="1">选项一</div>
  <div class="list-item" data-value="2">选项二</div>
  <div class="list-item" data-value="3">选项三</div>
  <div class="list-item" data-value="4">选项四</div>
</div>

2.2 CSS样式定义

.list-container {
  width: 300px;
  margin: 20px auto;
}
.list-item {
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
/* 高亮样式 */
.list-item.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

2.3 JavaScript实现代码

// 获取父容器
const container = document.querySelector('.list-container');
// 存储当前选中的值
let selectedValue = null;

// 使用事件委托绑定点击事件
container.addEventListener('click', function(e) {
  // 判断点击的是不是列表项
  if (e.target.classList.contains('list-item')) {
    // 清除所有列表项的高亮类名
    const allItems = container.querySelectorAll('.list-item');
    allItems.forEach(item => {
      item.classList.remove('active');
    });
    // 给当前点击的元素添加高亮类名
    e.target.classList.add('active');
    // 获取当前元素的data-value值
    selectedValue = e.target.dataset.value;
    console.log('当前选中的值：', selectedValue);
  }
});

三、Vue框架下的实现方式

在Vue中可以利用响应式数据和动态类名绑定来简化逻辑，不需要手动操作DOM类名，也不需要单独处理事件委托。

3.1 Vue模板代码

<template>
  <div class="list-container">
    <div 
      v-for="item in list" 
      :key="item.value"
      class="list-item"
      :class="{ active: currentValue === item.value }"
      :data-value="item.value"
      @click="handleClick(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

3.2 Vue逻辑代码

export default {
  data() {
    return {
      // 列表数据
      list: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' },
        { label: '选项四', value: '4' }
      ],
      // 当前选中的值，初始为空
      currentValue: ''
    };
  },
  methods: {
    handleClick(value) {
      // 更新选中的值
      this.currentValue = value;
      console.log('当前选中的值：', value);
    }
  }
};

四、常见问题注意事项

• 如果data-value的值是数字类型，通过dataset获取到的会是字符串类型，需要转换类型的话可以手动用Number()处理。
• 使用事件委托时，要注意判断点击的目标元素是不是我们期望的元素，避免出现误触发的情况。
• 高亮类名不要和其他样式冲突，建议给高亮类加明确的前缀或者作用域限制。
• 如果需要初始化默认选中某一项，只需要在初始化时给对应元素添加高亮类，同时设置选中的值即可。

注意：如果data-value属性是动态更新的，dataset会实时反映最新的值，不需要重新获取DOM元素。

data-value单选高亮JavaScript事件委托DOM操作修改时间：2026-06-27 03:06:35