TypeScript 中 如何使用 document.getElementsByClassName()
要在 TypeScript 中使用 document.getElementsByClassName() 方法，需要使用类型断言来正确键入元素集合，例如 const box = document.getElementsByClassName('box') as HTMLCollectionOf<HTMLElement>;。
这是本文中示例的 index.html 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script src="./src/index.ts"></script>
</body>
</html>
下面是 TypeScript 的相关代码
src/index.tsconst boxes = document.getElementsByClassName( 'box', ) as HTMLCollectionOf<HTMLElement>; Array.from(boxes).forEach(box => { console.log(box.innerText); });
document.getElementsByClassName 方法的返回类型为 HTMLCollectionOf<Element>。
Element 接口没有很多我们可能需要使用的属性，例如 style 或 innerText，因此我们使用类型断言将元素集合键入为 HTMLCollectionOf<HTMLElement>。
当我们有关于 TypeScript 无法知道的值的类型的信息时，使用类型断言。
我们有效地告诉 TypeScript，集合中的每个元素都是 HTMLElement 类型，不用担心。
我们还可以更具体地使用 HTMLDivElement 类型。
src/index.tsconst boxes = document.getElementsByClassName( 'box', ) as HTMLCollectionOf<HTMLDivElement>; Array.from(boxes).forEach(box => { console.log(box.innerText); });
现在我们将 box 变量键入为 div 元素的集合。
这些类型一致地命名为
HTML***Element。 一旦我们开始输入HTML..， IDE 应该能够帮助我们自动完成。
一些常用的类型有：HTMLInputElement、HTMLButtonElement、HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、HTMLSelectElement等。
请注意，document.getElementsByClassName 方法不返回数组，它返回具有提供的类名的所有子元素的类数组对象。
如果我们需要访问集合上特定于数组的方法，则必须先将其转换为数组。
src/index.tsconst boxes = Array.from( document.getElementsByClassName('box') as HTMLCollectionOf<HTMLElement>, ); boxes.forEach(box => { console.log(box.innerText); });
我们使用 Array.from 方法将类数组对象转换为数组，因此我们可以使用 forEach 方法对其进行迭代。
每次迭代的 box 变量的类型都是 HTMLElement，因为我们使用了带有 getElementsByClassName 方法的类型断言。
请注意，如果你必须访问特定于元素的属性，例如输入元素上的 value 属性，则必须将集合键入为该特定元素类型的集合，例如 HTMLCollectionOf<HTMLInputElement> 。
相关文章
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间：2023/03/19 浏览次数：181 分类：TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理，并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间：2023/03/19 浏览次数：97 分类：TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间：2023/03/19 浏览次数：172 分类：TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间：2023/03/19 浏览次数：161 分类：TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间：2023/03/19 浏览次数：182 分类：TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例，并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间：2023/03/19 浏览次数：221 分类：TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便，实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间：2023/03/19 浏览次数：110 分类：TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。
使用 NPM 将 TypeScript 更新到最新版本
发布时间：2023/03/19 浏览次数：130 分类：TypeScript
-
本教程说明了如何使用 npm 更新到最新版本的 TypeScript。这将为如何使用 npm 将 TypeScript 更新到最新版本提供完整的实际示例。
使用 jQuery 和 TypeScript
发布时间：2023/03/19 浏览次数：151 分类：TypeScript
-
本教程提供了使用 jQuery 和 TypeScript 的基本理解和概念。
