TypeScript代码报错：HTMLCollectionOf缺少EventTarget属性如何修复？

算力阿峰

2026-5-7

修复TypeScript中HTMLCollectionOf无法添加事件监听的错误

嘿，这个问题我熟！咱们先拆解下错误原因，再一步步搞定它～

错误根源

你写的document.getElementsByClassName("btn-up")返回的是**HTMLCollectionOf<Element>类型**——简单说就是一个包含所有匹配btn-up类名元素的集合，而不是单个元素。这个集合本身并没有addEventListener这类事件方法，所以TypeScript会抛出类型不匹配的错误。

修复方案

根据你的需求，有两种常见的解决方式：

1. 只针对单个按钮（或第一个匹配的按钮）

如果页面中只有一个btn-up按钮，或者你只需要给第一个按钮加监听，推荐用querySelector（它直接返回单个匹配元素，类型更友好）：

// querySelector返回第一个匹配的元素，类型是Element | null
const btn = document.querySelector(".btn-up");
// 先判断元素是否存在，避免null报错
if (btn) {
  btn.addEventListener('click', (event) => { 
    console.log('clickcc'); 
  });
}

如果你坚持用getElementsByClassName，可以通过索引取第一个元素，同时处理空值：

const btnCollection = document.getElementsByClassName("btn-up");
const btn = btnCollection[0];
if (btn) {
  btn.addEventListener('click', (event) => { 
    console.log('clickcc'); 
  });
}

不需要额外断言as EventTarget，因为Element本身就实现了EventTarget接口，TypeScript能自动识别。

2. 给所有匹配的按钮添加监听

如果页面中有多个btn-up按钮，需要给每个都加点击事件，直接遍历集合即可：

const btns = document.getElementsByClassName("btn-up");
// 遍历集合中的每个元素
for (const btn of btns) {
  btn.addEventListener('click', (event) => { 
    console.log('clickcc'); 
  });
}

这里TypeScript会自动推断btn的类型是Element，完全支持事件监听方法，不需要额外类型处理。