hidden属性语义清晰、可访问性好，浏览器跳过渲染但DOM仍存在；与display:none本质不同，不支持过渡动画，IE不兼容，推荐无值写法及elem.hidden=true/false操作。
用 hidden 属性控制显隐最简单，但别误以为它和 display: none 一样
直接写 hidden 就能隐藏元素，不需要 CSS 或 JS 配合，语义清晰、可访问性友好。但它和 display: none 的行为有本质区别：浏览器会跳过渲染该元素（不占布局空间、不触发重排），但 DOM 节点仍在，JS 仍可访问；而 display: none 是 CSS 控制的视觉隐藏，同样不占空间，但属于样式层，hidden 是 HTML 层语义标记。
常见误用是把它当“开关”反复 set/remove，却忽略它不带过渡、不触发动画——想加淡入淡出必须配 CSS transition + opacity，hidden 本身不支持。
-
hidden是布尔属性，写成<div hidden>或<div hidden="hidden">效果相同，但推荐无值写法 - JS 操作用
elem.hidden = true/false最直观，比setAttribute("hidden", "")更安全 - 注意兼容性：IE 不支持，如需兼容 IE11 及更早版本，得降级为
style.display = "none"
用 elem.style.display 动态切换时，恢复默认值别硬写 "block"
很多人写 elem.style.display = "block" 来“显示”，结果在 inline 元素上出错——按钮变块级、文字换行、布局崩了。根本原因是元素原始 display 值未必是 block，可能是 inline、inline-block、flex，甚至由父容器决定。
正确做法是清空内联 style：elem.style.display = ""，让浏览器回退到 CSS 级联计算出的真实值。这个空字符串不是“无效”，而是明确告诉浏览器：“我不干预 display，按样式表来”。
立即学习“前端免费学习笔记（深入）”；
- 隐藏统一用
elem.style.display = "none"，没问题 - 显示优先用
elem.style.display = ""，除非你 100% 确认目标元素始终是某一种 display 类型 - 如果元素初始状态靠外部 CSS 类控制（比如
.is-hidden { display: none; }），那 JS 应该操作 classList：elem.classList.add("is-hidden")/.remove("is-hidden")，而非直接动 style
用 visibility 和 opacity 实现“保留占位”的隐藏，要分清用途
visibility: hidden 和 opacity: 0 都能让元素“看不见”，但它们对交互和布局的影响完全不同：
-
visibility: hidden：元素不可见、不响应鼠标事件、不读屏，但占据文档流空间，周围元素不重排 -
opacity: 0：元素完全透明，但依然可点击、可聚焦、会被读屏器读取；也占空间，且支持 CSS 过渡动画
所以如果你要做“悬停后淡入菜单”，用 opacity + transition；如果只是临时屏蔽某区域（比如加载中遮罩层下内容暂停交互），visibility 更合适——它不会意外拦截点击。
JS 控制时，注意不要混用：elem.style.visibility = "hidden" 后，再设 elem.style.opacity = "0" 并不能叠加效果，反而可能干扰动画逻辑。
多个元素联动显隐时，别用独立 if/else 列表，统一收拢再展开
导航栏切换、Tab 面板、FAQ 折叠等场景，常见错误是给每个按钮写单独函数，像 showHome()、showAbout()，每个函数只管自己显、别人隐——结果用户快速连点两下，中间状态没清理干净，多个面板同时显示。
真正健壮的做法是：每次点击先遍历所有目标元素，统一设为隐藏；再单独显示当前目标。这样逻辑清晰、无状态残留。
- 用 class 控制比 style 更易维护：
document.querySelectorAll(".panel").forEach(p => p.classList.add("hidden")) - 避免用
display: none+display: block组合，改用单一 class 如.panel--active，CSS 里定义.panel:not(.panel--active) { display: none; } - 如果用
hidden属性，同样适用统一操作：document.querySelectorAll("[hidden]").forEach(el => el.removeAttribute("hidden"))，再对目标调target.setAttribute("hidden", "")
复杂点在于：有些场景需要保持“上次展开项”记忆，或支持多选折叠，这时候得引入状态管理变量，而不是靠 DOM 属性来回推断——容易漏掉边界情况。
