“全选折叠展开”是两类独立操作：全选属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。
可靠写法只有这一种：
document.querySelectorAll('details').forEach(el => el.open = false);
注意点：
- 加
:not([data-no-reset])可排除不想重置的项，比如固定导航栏里的details - 如果页面动态插入新
details（如 SPA 路由切换），得在插入后手动调用，或用MutationObserver监听 - 不要依赖
el.style.display === "none"判断是否已收起——open属性才是唯一可信状态
表格整行折叠必须绑定到 ，不能绑 把 onclick 写在 上，用户点 anywhere 都会触发，数据行被误点就意外收起，这是最常翻车的设计。
正确做法：
- HTML 中仅给首行
绑事件，移除
- JS 里用
table.rows 获取全部行，从索引 1 开始遍历（跳过表头）
- 切换显隐优先用 class（如
.hidden），而非直接改 row.style.display，方便后续加过渡动画或复用样式
- 若要支持逐行控制，用
nextElementSibling 定位下一行——nextSibling 会卡在换行符上，不可靠
真正难的不是写对一行代码，而是搞清“全选”和“折叠”根本不在同一抽象层：前者操作 Selection API，后者操作 DOM 显隐状态。混在一起处理，八成会在 Safari 或屏幕阅读器下出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
