如何通过用户输入动态指定并获取HTMLElement.dataset属性？

嘿，这个需求其实很好实现，核心就是利用JavaScript的括号表示法来动态访问dataset对象的属性——毕竟dataset本质是一个DOMStringMap，支持通过字符串键来取值，刚好能匹配你输入的后缀。下面给你一步步拆解实现方法：

完整代码示例 #

首先补全你的HTML结构（加上触发按钮和一个测试用的目标元素）：

<div class="form-group">
  <label for="specificSelector">Specific Selector</label>
  <input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
  <button id="fetchAttrBtn" class="btn btn-primary mt-2">Get Attribute Value</button>
</div>

<!-- 用来测试的目标元素，带两个data-属性 -->
<div id="targetElement" data-product-id="12345" data-product-name="Wireless Headphones"></div>

然后是JavaScript逻辑，处理输入、点击事件和属性获取：

// 先获取需要用到的DOM元素
const inputField = document.getElementById('specificSelector');
const fetchButton = document.getElementById('fetchAttrBtn');
const targetElement = document.getElementById('targetElement');

// 给按钮绑定点击事件
fetchButton.addEventListener('click', () => {
  // 获取并清理用户输入的内容
  const inputValue = inputField.value.trim();

  // 先判断输入是否为空
  if (!inputValue) {
    alert('请输入有效的data-属性后缀哦');
    return;
  }

  // 两种方式获取属性值，兼容不同的输入格式
  let attributeValue;

  // 方式1：直接用括号表示法，支持驼峰命名（比如输入productName）
  attributeValue = targetElement.dataset[inputValue];

  // 如果方式1没找到，试试方式2：用dataset.get()方法，支持原始的短横线命名（比如输入product-id）
  if (!attributeValue) {
    attributeValue = targetElement.dataset.get(inputValue);
  }

  // 根据结果给出反馈
  if (attributeValue) {
    alert(`找到对应属性值：${attributeValue}`);
    console.log(`data-${inputValue} 的值是：${attributeValue}`);
  } else {
    alert(`没找到对应的data-${inputValue}属性哦`);
  }
});

关键知识点说明 #

1. 为什么用括号表示法？
   当你需要动态访问对象属性时，不能用.语法（比如targetElement.dataset.inputValue会去找名为inputValue的固定属性，而不是变量inputValue的值），必须用对象[变量名]的括号表示法，这是动态属性访问的核心。

2. 关于命名转换
   HTML里的data-*属性是短横线分隔的（比如data-product-id），但在dataset对象里会自动转成驼峰命名（productId）。不过现在主流浏览器都支持dataset.get()方法，直接传入原始的短横线命名就能获取值，不用手动转换，非常方便。

3. 边界处理
   记得先判断输入是否为空，避免无效操作；同时要处理属性不存在的情况，给用户友好的反馈，避免控制台报错。

内容的提问来源于stack exchange，提问作者ParkerWilliams