过滤 HTMLCollection - Html

当涉及到 DOM 操作时，HTMLCollection 是一个非常有用的类型。HTMLCollection 是一个类数组对象，用于表示一个元素的集合，通常是 DOM 元素节点。但是，HTMLCollection 不是一个标准的 JavaScript 数组，因此有时候需要对其进行一些操作，比如过滤掉一些元素。

在这篇文章中，我们将会讨论如何过滤 HTMLCollection。

遍历和过滤 HTMLCollection

HTMLCollection 支持 for...of 循环，可以通过遍历它来访问集合中的每个元素。例如：

const elements = document.getElementsByClassName('example');
for (const element of elements) {
  console.log(element); // 输出每个拥有 'example' 类名的元素
}

要过滤 HTMLCollection，可以使用 Array.from() 方法将其转换为真正的数组，然后使用数组提供的方法进行过滤。例如：

const elements = document.getElementsByClassName('example');
const filteredElements = Array.from(elements).filter(element => {
  // 只保留拥有 'important' 类名的元素
  return element.classList.contains('important');
});
console.log(filteredElements);

通过这种方式，我们可以轻松地过滤 HTMLCollection，并得到一个新的数组，仅包含符合条件的元素。

使用 spread 运算符过滤 HTMLCollection

除了使用 Array.from() 方法外，我们还可以使用 spread 运算符将 HTMLCollection 转换为数组。例如：

const elements = document.getElementsByClassName('example');
const filteredElements = [...elements].filter(element => {
  // 只保留拥有 'important' 类名的元素
  return element.classList.contains('important');
});
console.log(filteredElements);

这种方法与使用 Array.from() 方法相似，只是使用的语法不同，可以根据个人习惯进行选择。

结论

过滤 HTMLCollection 并不困难。通过将其转换为真正的数组，并使用数组提供的方法进行过滤，我们可以轻松地得到一个新的数组，其中仅包含符合条件的元素。同时，使用 for...of 循环或 spread 运算符都是不错的选择。

希望这篇文章对你有所帮助！