原生JS实现多个元素隐藏，可通过选择器获取元素集合后遍历设置样式，使用document.querySelectorAll('.hide-item')选取所有目标元素，再通过forEach循环遍历，将每个元素的style.display属性设为none，若需交互触发，可结合事件监听，如点击按钮时执行隐藏逻辑，注意需提前判断元素是否存在，避免报错；对于动态元素，可使用事件委托优化，该方法简单高效，无需依赖框架，适合基础前端交互场景，灵活控制页面元素的显隐状态。
原生 JavaScript 实现多元素显隐控制：从基础到交互
在网页开发中,精准控制多个元素的显示与隐藏状态是一项高频需求，常见于选项卡切换、折叠面板、数据筛选、条件渲染等场景，虽然 jQuery 等库提供了便捷的 `hide()`/`show()` 方法，但掌握原生 JavaScript 的实现方式不仅能减少项目依赖、提升性能，更能深入理解 DOM 操作的底层逻辑，本文将系统介绍几种通过原生 JS 高效控制多元素显隐的实用方法，涵盖基础选择、批量操作及交互控制，并探讨其适用场景与注意事项。
基于类名的批量显隐控制
当需要操作具有相同类名的多个元素时（例如页面中所有带有 `.hide-item` 类的元素），`getElementsByClassName()` 是最直接的选择，该方法返回一个包含所有匹配元素的 **HTMLCollection**（实时集合）。
隐藏所有目标元素
通过遍历 HTMLCollection 并设置每个元素的 `style.display` 属性为 `'none'`，即可实现批量隐藏。
// 获取所有类名为 'hide-item' 的元素
const hiddenItems = document.getElementsByClassName('hide-item');
// 遍历集合，隐藏每个元素
for (let i = 0; i < hiddenItems.length; i++) {
hiddenItems[i].style.display = 'none'; // 设置为隐藏
}
显示所有目标元素
若需恢复显示,可将 `style.display` 设置为初始值，常用值包括 `'block'`（块级元素）、`'inline'`（行内元素）或空字符串 `''`（恢复元素默认显示状态）。
for (let i = 0; i < hiddenItems.length; i++) {
hiddenItems[i].style.display = 'block'; // 恢复为块级显示
// 或 hiddenItems[i].style.display = ''; // 恢复默认显示
}
注意事项
- 实时集合特性： `getElementsByClassName()` 返回的是 **HTMLCollection**，它是“活”的集合，DOM 结构在遍历过程中发生变化（如动态添加/删除元素），集合会自动更新，可能导致预期外的结果。
- 遍历限制： HTMLCollection **不直接支持** `forEach()` 方法，若需使用现代迭代方法，需先将其转换为静态数组：`Array.from(hiddenItems).forEach(...)`。
- 性能考量： 对于大量元素，`for` 循环通常比 `forEach` 或 `for...of`（需转换）性能更优。
基于标签名或自定义属性的灵活选择
当目标元素缺乏共同类名时,可利用标签名（`
`, `
通过标签名选择：批量操作同类型元素
`getElementsByTagName()` 方法可获取指定标签名的所有元素集合，其使用方式与 `getElementsByClassName()` 类似。
// 获取所有标签元素 const paragraphs = document.getElementsByTagName('p');
// 隐藏所有
标签 for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.display = 'none'; }
通过自定义属性选择：精准定位目标元素
当需根据业务逻辑（如“需要隐藏的元素”）进行筛选时，可定义自定义属性（如 `data-hidden="true"`），并结合 `querySelectorAll()` 实现精准选择。**`querySelectorAll()` 支持强大的 CSS 选择器语法**，返回的是 **NodeList**（静态集合）。
// 选择所有带有 'data-hidden="true"' 属性的元素
const targetElements = document.querySelectorAll('[data-hidden="true"]');
// 隐藏这些元素 (NodeList 支持 forEach)
targetElements.forEach(element => {
element.style.display = 'none';
});
方法对比与选择指南
| 方法 | 返回类型 | 是否支持复杂选择器 | 适用场景 | 是否支持静态/动态 |
|---|---|---|---|---|
| getElementsByClassName | HTMLCollection | 否（仅类名） | 元素有共同类名，需批量操作 | 动态（实时更新） |
| getElementsByTagName | HTMLCollection | 否（仅标签名） | 批量操作同类型标签元素 | 动态（实时更新） |
| querySelectorAll | NodeList | 是（支持完整 CSS 选择器） | 需通过属性、层级、伪类等精准选择 | 静态（查询快照） |
选择建议： 优先使用 `querySelectorAll()` 以获得最大的灵活性和现代迭代支持（`forEach`），仅在明确知道元素具有共同类名且追求极致性能（且不担心 DOM 动态变化）时，才考虑 `getElementsByClassName()` 或 `getElementsByTagName()`。
交互控制 - 点击切换元素显隐状态
实际应用中,显隐控制通常由用户交互触发（如点击按钮），下面以“点击按钮切换多个 `.toggle-item` 元素的显示状态”为例，实现动态控制。
HTML 结构
<button id="toggleBtn">切换显示/隐藏</button> <div class="toggle-item">元素 1</div> <div class="toggle-item">元素 2</div> <div class="toggle-item">元素 3</div> <!-- 更多 .toggle-item 元素... -->
JavaScript 实现
核心思路是：获取所有目标元素，根据当前状态（如 `display` 值）决定是隐藏还是显示它们
