JavaScript报Cannot read properties of undefined (reading 'contains')原因求解

你遇到的类型错误根源在于 document.getElementsByTagName() 方法的返回值是HTMLCollection类数组集合，不是单个DOM元素：

• 该集合对象本身没有内置classList属性，所以你访问document.getElementsByTagName("a").classList得到的结果是undefined
• 尝试调用undefined的contains/remove/add等方法，自然会触发Cannot read properties of undefined类型的报错，你调整代码后报错方法名变化，只是因为代码执行顺序变了，先调用了别的方法而已，错误本质完全一致。

如果你要操作所有a标签的类名，需要先遍历集合：

tab.addEventListener("click", (e) => { 
  e.preventDefault();
  // 先把类数组集合转为数组，再遍历每个DOM元素操作
  const allATags = Array.from(document.getElementsByTagName("a"));
  allATags.forEach(item => {
    if (item.classList.contains("active")) {
      item.classList.remove("active"); 
    } else {
      console.log("nothing")
    }
  })
})

如果你要操作的是当前点击的a标签，直接取事件对象的目标元素即可：

tab.addEventListener("click", (e) => { 
  e.preventDefault();
  const currentClickEl = e.target;
  if (currentClickEl.tagName === 'A' && currentClickEl.classList.contains("active")) {
    currentClickEl.classList.remove("active"); 
  } else {
    console.log("nothing")
  }
})

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