如何在TypeScript中遍历带有特定类名的HTMLElements？

方法1：用Array.from()转换为数组 #

Array.from()可直接将类数组的HTMLCollection转为真正的数组，既解决TypeScript的迭代器报错问题，也能直接使用数组的所有遍历方法：

const elements = Array.from(document.getElementsByClassName("myclass"));
elements.forEach((item: HTMLElement) => {
    alert(item.innerText);
    // 执行其他操作
});

也可以搭配for...of循环使用：

const elements = Array.from(document.getElementsByClassName("myclass"));
for (const item of elements) {
    alert(item.innerText);
}

方法2：配置TypeScript支持DOM迭代器（可选） #

如果不想转换数组，可在tsconfig.json中启用DOM迭代器的类型支持，确保lib包含ES2015及以上版本和DOM：

{
  "compilerOptions": {
    "lib": ["ES2015", "DOM"]
  }
}

配置完成后就能直接使用扩展运算符：

const elements = [...document.getElementsByClassName("myclass")];
elements.forEach((item: HTMLElement) => {
    // 操作元素
});

方法3：使用传统for循环 #

HTMLCollection是动态集合，DOM元素变化会实时影响集合内容。如果担心遍历过程中DOM变动导致的异常，传统for循环是最稳妥的选择：

const elements = document.getElementsByClassName("myclass");
for (let i = 0; i < elements.length; i++) {
    const item = elements[i] as HTMLElement;
    alert(item.innerText);
}

关于你的forEach代码只执行一次的问题 #

你提供的Array.prototype.forEach.call()逻辑本身正确，只弹出一次提示大概率是以下原因：

• 页面中实际只有一个带myclass类名的元素；
• 遍历过程中修改了DOM（比如移除元素、修改类名），动态的HTMLCollection长度实时缩短，导致遍历提前结束。这种情况先转成数组再遍历即可避免。

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