HTML 元素集合到数组 - TypeScript

在 TypeScript 中，可以使用 DOM API 获取 HTML 元素，并将它们保存为数组。这可以方便地处理元素集合。

示例

const elementArray: HTMLElement[] = Array.from(document.querySelectorAll('.example-class'));

elementArray.forEach(element => {
  // Do something with each element
});

上面的示例演示了如何获取带有 example-class 类名的元素集合，并将这些元素存储在一个数组中。然后，可以使用 forEach 函数迭代数组中的每个元素，并执行所需的操作。

解释

首先，我们使用 document.querySelectorAll 方法选择所有具有 example-class 类名的元素。这将返回一个类似数组的对象，称为 NodeList。

document.querySelectorAll('.example-class');

为了使用数组的操作（如 forEach），我们需要将 NodeList 转换为实际的数组。可以使用 Array.from 来实现这一点。

Array.from(document.querySelectorAll('.example-class'));

最后，我们将返回一个由 HTMLElement 对象组成的数组。在本例中，我们只是使用 forEach 来执行一些操作。但是，您可以使用任何适用于数组的功能来对元素集合进行更多的操作。

结论

将 HTML 元素集合转换为数组是 TypeScript 中处理元素集合的直接方式。虽然示例中使用的是 querySelectorAll 和 Array.from 方法来获取元素，但还有其他用于获取元素的方法。但是，无论您使用哪种方法获取元素，都可以使用数组来处理元素集合，并轻松地执行所需操作。