“全选折叠展开”是两类独立操作：全选属Selection API，需用window.getSelection()+Range替代已废弃的execCommand；折叠属DOM显隐控制，details须遍历设open=false，表格行折叠应绑定表头tr并用class切换。

“全选折叠展开”不是单一操作，而是两个独立动作的组合：全选（select all）指文本高亮，折叠展开（collapse/expand）指显隐切换。混用这两个词容易导致逻辑混乱、代码失效——先明确你要的是哪一类。

document.execCommand("selectAll") 已废弃，别再用

很多老教程还在教 document.execCommand("selectAll")，但它在 Chrome 90+、Firefox 88+ 中已被移除，调用会静默失败或抛错。即使暂时没报错，也属于随时可能崩的“技术债”。

替代方案必须用 window.getSelection() + Range：

• 创建 Range 实例，调用 range.selectNodeContents(target)，target 可以是 document.body 或任意容器（如 document.getElementById("content")）
• 用 window.getSelection().removeAllRanges() 清空旧选区，再 .addRange(range)
• 若目标元素设置了 user-select: none，需临时改为 text，选完再还原

details 元素批量收起必须遍历 open = false

想点一个按钮就让页面所有 details 都关闭？不能靠 toggle()，它只翻转状态；也不能只操作顶层，嵌套的 details 仍保持 open = true。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

立即学习“前端免费学习笔记（深入）”；

可靠写法只有这一种：

document.querySelectorAll('details').forEach(el => el.open = false);

注意点：

• 加 :not([data-no-reset]) 可排除不想重置的项，比如固定导航栏里的 details
• 如果页面动态插入新 details（如 SPA 路由切换），得在插入后手动调用，或用 MutationObserver 监听
• 不要依赖 el.style.display === "none" 判断是否已收起——open 属性才是唯一可信状态

表格整行折叠必须绑定到 ，不能绑

把 onclick 写在 <table> 上，用户点 anywhere 都会触发，数据行被误点就意外收起，这是最常翻车的设计。 <p>正确做法：</p> <ul><li>HTML 中仅给首行 <code><tr class="header"> 绑事件，移除 <code><table onclick> <li>JS 里用 <code>table.rows 获取全部行，从索引 1 开始遍历（跳过表头）

切换显隐优先用 class（如 .hidden），而非直接改 row.style.display，方便后续加过渡动画或复用样式

若要支持逐行控制，用 nextElementSibling 定位下一行——nextSibling 会卡在换行符上，不可靠

真正难的不是写对一行代码，而是搞清“全选”和“折叠”根本不在同一抽象层：前者操作 Selection API，后者操作 DOM 显隐状态。混在一起处理，八成会在 Safari 或屏幕阅读器下出问题。