DOM元素隐藏有多种方式：display='none'彻底移除渲染且不占空间；visibility='hidden'仅视觉隐藏但保留布局空间；推荐用CSS类切换实现可维护性与动画支持；opacity=0保持交互，移出视口适合无障碍，remove()则从DOM删除。
DOM 元素没有真正意义上的“隐藏属性”，但有几种常见方式能让元素在页面上不可见，同时保持其在 DOM 树中存在。关键区别在于：是视觉隐藏、还是从渲染流中移除、或是完全从 DOM 中删除。
用 style.display 控制显示/隐藏
这是最常用的方式，通过修改元素的 display 样式来控制是否渲染：
- display: 'none'：元素彻底不渲染，不占空间，也不响应事件
- display: 'block'（或其他如 'inline'、'flex'）：恢复显示
示例：
element.style.display = 'none';
element.style.display = 'block';
用 style.visibility 控制可见性
只影响“是否可见”，不影响布局：
- visibility: 'hidden'：元素不可见，但仍占据空间，子元素默认继承该状态
- visibility: 'visible'：恢复可见
- 注意：设置 visibility: 'hidden' 后，元素仍可被 focus 或参与 tab 键导航（除非额外禁用）
示例：
element.style.visibility = 'hidden';
element.style.visibility = 'visible';
用 class 切换隐藏状态（推荐做法）
把样式逻辑交给 CSS，JS 只负责开关类名，更易维护：
立即学习“Java免费学习笔记（深入）”；
- CSS 中定义：
.hidden { display: none; }
.invisible { visibility: hidden; } - JS 中操作：
element.classList.add('hidden');
element.classList.remove('hidden');
element.classList.toggle('hidden');
这种方式便于复用、支持动画过渡（比如配合 opacity 和 transition），也避免内联样式污染。
其他类似效果的操作
有些方法看似“隐藏”，实则行为不同，需按需选择：
- opacity: 0：透明但仍在文档流中，仍可交互（点击、hover 等）
- position: absolute + left: -9999px：移出视口，常用于屏幕阅读器友好的隐藏（如表单 label 的辅助文本）
- remove() 或 innerHTML = ''：不是隐藏，而是从 DOM 中移除，后续需重新创建才能显示
不复杂但容易忽略细节，选哪种方式取决于你是否需要保留布局空间、是否允许交互、以及是否要支持动画或可访问性。
