如何获取元素的dataset属性？排查console.log乘法操作的代码错误

我来帮你一步步解决这两个问题：

获取元素的dataset属性其实很简单，DOM元素的dataset是一个DOMStringMap对象，它会自动映射元素上所有以data-开头的属性：

• 对于data-action="multiply"这样的属性，直接通过元素.dataset.action就能拿到值multiply
• 如果属性名有连字符，比如data-product-id="123"，需要用驼峰式访问：元素.dataset.productId
• 另外也可以用传统的getAttribute('data-action')方法获取，效果是一样的

核心前提是：你必须先选中单个DOM元素，而不是元素集合。

先看你代码里的问题：

var doms = document.getElementsByTagName('button');
const data = doms.dataset.action; // 这里出错了！

document.getElementsByTagName('button')返回的是一个HTMLCollection（类数组的元素集合），它本身没有dataset属性——只有单个的DOM元素才有dataset。所以直接访问doms.dataset会导致undefined，进而访问action就会抛出异常。

下面是两种修复方案：

方案1：精准定位目标按钮（推荐） #

如果你只需要获取那个data-action="multiply"的按钮，用querySelector直接选中它更高效：

<button class="key--operator" data-action="multiply">&times;</button>
<script>
// 直接选中带有data-action="multiply"的button元素
const multiplyBtn = document.querySelector('button[data-action="multiply"]');
if (multiplyBtn) { // 先判断元素是否存在，避免报错
  const data = multiplyBtn.dataset.action;
  console.log(data); // 输出：multiply
}
</script>

方案2：遍历元素集合（如果需要处理多个按钮） #

如果你要处理所有button元素，需要遍历这个HTMLCollection，逐个检查元素的dataset：

<button class="key--operator" data-action="multiply">&times;</button>
<button class="key--operator" data-action="add">+</button>
<script>
const doms = document.getElementsByTagName('button');
// 用for...of遍历集合
for (const btn of doms) {
  // 检查当前按钮是否有data-action属性，且值为multiply
  if (btn.dataset.action === 'multiply') {
    console.log(btn.dataset.action); // 输出：multiply
  }
}
</script>

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