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

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » TypeScript 中 如何使用 document.getElementsByClassName()