如何判断getElementsByTagName获取的元素是否包含指定类？原生JavaScript

嘿，我来帮你理清这个问题！你遇到的报错是因为一个很容易踩的小坑：document.getElementsByTagName("tr")返回的不是单个<tr>元素，而是一个HTMLCollection——也就是一组匹配标签名的元素集合，集合本身是没有classList属性的，所以才会抛出undefined is not an object的错误。

下面分两种场景给你解决方案：

场景1：检查某一个特定的<tr>元素是否包含类 #

如果你想检查集合里的某一个元素（比如第一个<tr>），只需要通过索引从集合中取出单个元素，再调用classList.contains()即可：

修改你的函数如下：

function myFunction() {
  // 获取第一个<tr>元素（索引从0开始）
  var targetTr = document.getElementsByTagName("tr")[0];
  // 检查该元素是否包含"mystyle"类
  var hasTargetClass = targetTr.classList.contains("mystyle");
  document.getElementById("demo").innerHTML = hasTargetClass;
}

这样运行后，就会正确输出false（因为你的<tr>都没有加mystyle类）。

场景2：检查所有<tr>中是否存在带有指定类的元素 #

如果你想确认所有<tr>里有没有任何一个带有目标类，可以遍历整个元素集合，逐个检查：

function myFunction() {
  var trCollection = document.getElementsByTagName("tr");
  var hasAnyTrWithClass = false;
  
  // 遍历所有<tr>元素
  for (var i = 0; i < trCollection.length; i++) {
    if (trCollection[i].classList.contains("mystyle")) {
      hasAnyTrWithClass = true;
      break; // 找到一个符合条件的就停止循环，提升效率
    }
  }
  
  document.getElementById("demo").innerHTML = hasAnyTrWithClass;
}

兼容旧版IE的方案 #

如果需要兼容IE9及更早版本（这些浏览器不支持classList属性），可以通过className属性来判断，不过要注意避免类名部分匹配的问题，比如可以写一个辅助函数：

// 辅助函数：判断元素是否包含指定类
function hasElementClass(element, className) {
  // 在类名前后加空格，避免匹配类似"mystyle-other"的情况
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

// 调用示例
function myFunction() {
  var targetTr = document.getElementsByTagName("tr")[0];
  var hasTargetClass = hasElementClass(targetTr, "mystyle");
  document.getElementById("demo").innerHTML = hasTargetClass;
}

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