如何使用 JavaScript 按类隐藏 HTML 元素？

在前端开发中，隐藏 HTML 元素是非常常见的需求，而按类隐藏 HTML 元素则是一种比较高效的方式。本文将介绍如何使用 JavaScript 按类隐藏 HTML 元素。

1. 获取元素

首先，我们需要获取需要隐藏的 HTML 元素。可以通过 querySelectorAll 方法获取具有特定类名的所有元素。例如，以下代码将获取所有类名为 hide 的元素：

const elementsToHide = document.querySelectorAll('.hide');

2. 隐藏元素

有了待隐藏的元素，接下来就是如何隐藏它们了。有很多种方式可以实现元素的隐藏，常见的方式包括设置元素的 display 属性为 none，或者为元素添加 hidden 属性。

2.1 设置 display 属性为 none

要通过 JavaScript 设置元素的 display 属性为 none，可以使用以下代码：

elementsToHide.forEach(element => {
  element.style.display = 'none';
});

使用 style.display 可以直接在 JavaScript 中设置元素的 display 属性。

2.2 添加 hidden 属性

另外一种方式是为元素添加 hidden 属性。在 HTML 中，如果一个元素添加了 hidden 属性，那么它将不会被显示。可以通过以下代码实现为元素添加 hidden 属性：

elementsToHide.forEach(element => {
  element.hidden = true;
});

3. 示例代码

最后，以下是一段示例代码，演示了如何按类隐藏 HTML 元素：

const elementsToHide = document.querySelectorAll('.hide');

elementsToHide.forEach(element => {
  element.style.display = 'none';
  // 或者使用以下代码隐藏元素：
  // element.hidden = true;
});

以上就是使用 JavaScript 按类隐藏 HTML 元素的简单介绍。根据具体需求，我们可以使用不同的方式来隐藏 HTML 元素。