JavaScript中getElementsByClassName批量添加onclick仅首个生效问题

你遇到的问题主要有两个核心原因：

1. 重复使用同一个DOM属性节点：你创建的att和att1属性节点是单个DOM对象，当你把它添加到第一个元素后，它就已经属于该元素了，无法再被添加到其他元素上——DOM属性节点不能同时绑定到多个元素。
2. 冗余的DOM查询与语法错误：循环里每次重新调用document.getElementsByClassName('dropdown')没必要，而且代码末尾多了一个多余的}，会导致JavaScript执行报错中断。

修复后的代码 #

<script type="text/javascript">
  // 获取所有dropdown元素
  var dropdowns = document.getElementsByClassName('dropdown');
  // 遍历每个元素
  for (var i = 0; i < dropdowns.length; ++i) {
    // 为每个元素单独创建onclick属性
    var att = document.createAttribute('onclick');
    att.value = 'openChild(this)';
    dropdowns[i].setAttributeNode(att);
    
    // 为每个元素单独创建href属性
    var att1 = document.createAttribute('href');
    att1.value = 'javascript:void(0)';
    dropdowns[i].setAttributeNode(att1);
  }
</script>

额外优化建议 #

其实还有更简洁的写法，不用创建属性节点，直接用setAttribute方法，代码会更清晰：

<script type="text/javascript">
  var dropdowns = document.getElementsByClassName('dropdown');
  for (var i = 0; i < dropdowns.length; ++i) {
    dropdowns[i].setAttribute('onclick', 'openChild(this)');
    dropdowns[i].setAttribute('href', 'javascript:void(0)');
  }
</script>

或者用更现代的事件绑定方式（推荐，避免内联事件耦合）：

<script type="text/javascript">
  function openChild(element) {
    // 这里写你的下拉菜单展开逻辑
  }

  var dropdowns = document.getElementsByClassName('dropdown');
  for (var i = 0; i < dropdowns.length; ++i) {
    dropdowns[i].href = 'javascript:void(0)';
    // 使用addEventListener绑定事件，更灵活且便于维护
    dropdowns[i].addEventListener('click', function() {
      openChild(this);
    });
  }
</script>

这样修改后，所有dropdown类的元素都会正确添加上onclick属性和href属性啦。

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