使用getElementsByClassName为HTML元素添加类时出现TypeError错误的求助

嘿，我来帮你搞定这个报错～你遇到的问题其实很常见，原因是你用的document.getElementsByClassName('rel_row_0')返回的不是单个元素，而是一个HTMLCollection（元素集合）——简单说就是一堆符合条件的元素被打包在一起。集合本身没有classList.add()这个方法，所以直接调用就会触发"Cannot read properties of undefined"的错误。

下面给你几种修复方案，按需选择就行：

方案1：遍历元素集合（兼容性好） #

用for循环逐个给集合里的元素添加类名：

<a onclick="
  const targetElements = document.getElementsByClassName('rel_row_0');
  for (let i = 0; i < targetElements.length; i++) {
    targetElements[i].classList.add('underline');
  }
">X</a>

方案2：转成数组用forEach（写法更简洁） #

把元素集合转成数组后，用forEach遍历处理：

<a onclick="
  Array.from(document.getElementsByClassName('rel_row_0')).forEach(element => {
    element.classList.add('underline');
  });
">X</a>

方案3：如果只有一个目标元素（简化写法） #

如果你确定页面上只有一个rel_row_0类的元素，可以用querySelector直接获取单个元素，还能加可选链操作符防止找不到元素时报错：

<a onclick="document.querySelector('.rel_row_0')?.classList.add('underline');">X</a>

这样点击链接后，所有rel_row_0类的元素都会加上underline类啦～

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