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.ts

const 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.ts

const boxes = document.getElementsByClassName(
  'box',
) as HTMLCollectionOf<HTMLDivElement>;

Array.from(boxes).forEach(box => {
  console.log(box.innerText);
});

现在我们将 box 变量键入为 div 元素的集合。

这些类型一致地命名为 HTML***Element 。 一旦我们开始输入 HTML.. , IDE 应该能够帮助我们自动完成。

一些常用的类型有:HTMLInputElementHTMLButtonElementHTMLAnchorElementHTMLImageElementHTMLTextAreaElementHTMLSelectElement等。

请注意,document.getElementsByClassName 方法不返回数组,它返回具有提供的类名的所有子元素的类数组对象。

如果我们需要访问集合上特定于数组的方法,则必须先将其转换为数组。

src/index.ts

const 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> 。