JS点击相同class的不同div获取对应value的极简实现方案咨询

• document.getElementsByClassName('h') 返回的是匹配该class的所有元素组成的类数组集合，不是单个DOM元素，无法直接调用getAttribute方法
• 原生div不属于表单元素，默认无value标准属性，更规范的写法是使用data-*前缀的自定义属性

直接在触发点击事件时将当前点击元素作为参数传入函数即可，无需遍历所有class匹配元素，代码改动量最小：

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      // 接收点击的元素参数
      function test(el){
        var ai = el.getAttribute('value');
        // 如果你换成规范的data-value属性，这里可以写el.getAttribute('data-value')或者el.dataset.value
        alert(ai)
      }
    </script>
  </head>
  <body>
    <!-- 调用函数时传入当前元素this -->
    <div style="height:100px;width:100px;background-color:red;" class="h" value="1" onclick="test(this)">1</div>
    <div style="height:100px;width:100px;background-color:red;" class="h" value="2" onclick="test(this)">2</div>
  </body>
</html>

如果不想在HTML标签上写onclick属性，也可以用事件批量绑定的方式，同样无需重复编写逻辑：

window.onload = function(){
  document.querySelectorAll('.h').forEach(el => {
    el.onclick = () => alert(el.getAttribute('value'))
  })
}

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