如何使用 JavaScript 按类隐藏 HTML 元素?
处理动态网页时，通常需要根据特定条件或用户交互隐藏某些 HTML 元素。一种常见的方法是将类分配给这些元素，然后使用 JavaScript 动态隐藏它们。这提供了一种灵活而有效的方法来控制元素的可见性，而无需修改 HTML 结构。
在本文中，我们将探讨如何使用 JavaScript 按类隐藏 HTML 元素。我们将讨论动态隐藏元素的重要性，理解 HTML 类的概念，并学习使用 JavaScript 按类选择元素的不同方法。然后，我们将深入研究实施细节，提供分步说明和工作代码示例。
按类选择元素
一旦我们很好地掌握了 HTML 类，我们就可以继续使用 JavaScript 按类选择元素。有多种方法可以让我们根据元素分配的类来定位元素。在本节中，我们将探讨两种常用方法:getElementsByClassName() 和 querySelectorAll()。
按类选择元素的 JavaScript 方法概述
在 JavaScript 中按类选择元素时，会想到两种主要方法:getElementsByClassName() 和 querySelectorAll()。这两种方法都允许我们检索具有共同类的元素集合。让我们仔细看看每种方法 -
getElementsByClassName() getElementsByClassName() 方法是一种内置 JavaScript 方法，可检索具有特定类名的元素集合。它将类名作为参数并返回实时 HTMLCollection 对象。
let elements = document.getElementsByClassName(className);
getElementsByClassName() 方法在所有现代浏览器中都得到广泛支持，并提供了一种按类选择元素的直接方法。但是，它返回一个实时集合，这意味着对 DOM 所做的任何更改都将自动反映在该集合中。
querySelectorAll() 另一方面，querySelectorAll() 方法提供了一种使用 CSS 选择器选择元素的更灵活方法。它接受 CSS 选择器作为参数并返回静态 NodeList 对象。
let elements = document.querySelectorAll(selector);
使用 querySelectorAll()，您可以使用任何 CSS 选择器(包括类选择器)来检索元素集合。此方法在所有现代浏览器中都得到支持，并提供更高级的选择功能。但是，返回的集合是静态的，这意味着当 DOM 发生变化时它不会自动更新。
使用 GetElementsByClassName() 方法
getElementsByClassName() 方法使用起来很简单。它接受一个参数，即类名，并返回一个包含该类所有元素的实时 HTMLCollection。以下是一个例子 -
<!DOCTYPE html>
<html>
<head>
<title>Using getElementsByClassName()</title>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
let elements = document.getElementsByClassName('box');
console.log(elements); // Outputs a live HTMLCollection
</script>
</body>
</html>
在此示例中，getElementsByClassName() 方法用于选择类名为"box"的所有元素。然后可以操作或访问返回的 HTMLCollection 以进行进一步处理。
使用 QuerySelectorAll() 方法
querySelectorAll() 方法在按类选择元素方面提供了更大的灵活性，因为它允许使用 CSS 选择器。此方法返回一个静态 NodeList，其中包含与指定选择器匹配的所有元素。以下是示例 −
<!DOCTYPE html>
<html>
<head>
<title>Using querySelectorAll()</title>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
let elements = document.querySelectorAll('.box');
console.log(elements); // Outputs a static NodeList
</script>
</body>
</html>
在此示例中，querySelectorAll() 方法与 CSS 类选择器".box"一起使用，以选择类名为"box"的所有元素。返回的 NodeList 可以迭代或使用类似数组的索引进行访问。
每种方法的优缺点
getElementsByClassName() 和 querySelectorAll() 都有各自的优点和注意事项。在选择它们时，请注意以下几点 -
getElementsByClassName() 得到良好支持，并返回实时 HTMLCollection，允许在 DOM 更改时自动更新。但是，它缺乏 CSS 选择器的灵活性。
querySelectorAll() 使用 CSS 选择器提供更高级的选择功能，并返回静态 NodeList。它提供了更大的灵活性，但不会在 DOM 更改时自动更新。
按类隐藏元素
我们可以采取不同的方法来实现这一点，具体取决于我们所需的控制和兼容性级别。
使用 CSS 按类隐藏元素
按类隐藏元素的一种简单有效的方法是利用 CSS display 属性。display 属性允许我们控制网页上元素的可见性。以下是我们如何使用 CSS 按类隐藏元素 -
CSS display 属性简介
CSS display 属性指定元素的渲染行为。通过将其设置为 none，我们可以有效地隐藏元素。例如−
let elements = .hidden {
display: none;
}
应用"display: none"隐藏元素
要使用定义的 CSS 类隐藏元素，只需将该类应用于所需元素即可。例如 −
<div class="box hidden">此元素已隐藏。
带有"box"和"hidden"类的元素将在网页上隐藏。
设置用于隐藏元素的 CSS 类
为了使隐藏过程更加模块化和可重用，专门为隐藏元素定义 CSS 类是有益的。例如−
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
通过为不同的隐藏行为设置单独的类，我们可以根据自己的需求轻松地将所需的可见性样式应用于元素。
使用 JavaScript 动态应用 CSS 类
虽然使用 CSS 类隐藏元素是一种简单的方法，但我们可以通过使用 JavaScript 动态操作这些类来增强交互性和控制力。
添加 CSS 类以隐藏元素
要使用 JavaScript 动态隐藏元素，我们可以将与隐藏相关的 CSS 类添加到所需的元素。以下是一个例子 -
let element = document.getElementById("myElement");
element.classList.add("hidden");
在此示例中，隐藏类被添加到 ID 为"myElement"的元素，从而有效地隐藏了它。
删除 CSS 类以显示元素
要再次显示隐藏元素，我们可以使用 JavaScript 从元素中删除 CSS 类。以下是示例 -
let element = document.getElementById("myElement");
element.classList.remove("hidden");
此代码从 ID 为"myElement"的元素中删除隐藏类，使其再次可见。
使用 JavaScript 操作类名
JavaScript 提供了多种方法来操作元素上的类名。例如 −
classList.add("className") − 将类添加到元素的类列表中。
classList.remove("className") − 从元素的类列表中删除一个类。
classList.toggle("className") − 在元素的类列表中切换类的存在。
classList.contains("className") − 检查元素是否具有特定类。
利用这些方法，我们可以动态地添加或删除所需的 CSS 类，以实现对元素的隐藏或显示效果。
示例:使用 CSS 和 JavaScript 按类隐藏元素
让我们把所有内容放在一起，并演示一个使用 CSS 和 JavaScript 按类隐藏元素的示例。
<!DOCTYPE html>
<html>
<head>
<title>Hiding Elements by Class</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="box">Visible Element</div>
<div class="box hidden">Hidden Element</div>
<button onclick="hideElements()">Hide Elements</button>
<button onclick="showElements()">Show Elements</button>
<script>
function hideElements() {
let elements = document.getElementsByClassName("box");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add("hidden");
}
}
function showElements() {
let elements = document.getElementsByClassName("box");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove("hidden");
}
}
</script>
</body>
</html>
在此示例中，我们有两个带有"box"类的 <div> 元素。一个元素最初是可见的，而另一个元素使用 CSS 类"hidden"隐藏。这两个按钮触发 JavaScript 函数，这些函数动态添加或删除"hidden"类以相应地显示或隐藏元素。
兼容性和性能注意事项
使用 CSS 和 JavaScript 按类隐藏元素时，务必考虑浏览器兼容性和性能影响。
CSS 和 JavaScript 方法的浏览器兼容性
确保用于隐藏元素的 CSS 属性和 JavaScript 方法在不同浏览器中均受支持。建议检查浏览器兼容性表或在需要时使用适当的 polyfill 或后备。
使用不同方法的性能影响
动态操纵元素的可见性可能会影响性能，尤其是在处理大量元素时。优化代码并考虑替代方法非常重要，例如，如果可能，隐藏容器元素而不是单个元素。
优化大量元素的隐藏过程
处理大量元素时，请考虑使用更高效的 DOM 遍历方法(如 querySelectorAll())，并缓存选定元素以避免冗余 DOM 查询。此外，批量操作或利用虚拟渲染技术可以帮助提高处理大量列表或表格时的性能。
结论
处理大量元素时，请考虑使用更高效的 DOM 遍历方法(如 querySelectorAll())，并缓存选定元素以避免冗余 DOM 查询。此外，批量操作或利用虚拟渲染技术可以帮助提高处理大量列表或表格时的性能。
