不能用 remove() 或 innerhtml = '' 清空子层级，因为会丢失 contenteditable 焦点、折叠状态、第三方插件实例及框架组件状态；根本问题在于销毁后无法自动复原上下文，须通过 display: none + data 属性隔离生命周期并复用 dom。
无限滚动中多层级列表的节点不能靠“滚动出视野就删”，必须保留可寻址引用——尤其当某层是 contenteditable 或绑定了焦点/selection 时，删了就再也找不回光标位置。
为什么不能用 remove() 或 innerHTML = '' 清空子层级
多层级列表（比如折叠树、嵌套评论、带子项的菜单）一旦触发无限加载，常见错误是把已滚出区域的整层 DOM 节点直接 remove() 或用 innerHTML = '' 清空。这会导致：
-
contenteditable元素失去焦点且无法恢复，getSelection().focusNode指向 null - 折叠状态丢失：用户展开的子节点被销毁后，再滚回来只能重载，默认收起
- 第三方插件（如代码高亮、语法校验）实例被销毁，重新挂载需完整初始化，开销翻倍
- React/Vue 子组件 unmount → mount 循环，state 重置，input 值清空
根本问题不是“要不要删”，而是“删了之后谁来负责重建并复原状态”。浏览器不保存这些上下文，你得自己管。
推荐做法：用 display: none + data-index 隔离层级生命周期
对每个可折叠层级（例如 <li class="item" data-level="2">），不销毁，只控制显隐和数据绑定：
- 滚动监听中判断该层级是否完全离开可视区（顶部距离 > 1000px 且无子项在视口内），则设
el.style.display = 'none' - 保留所有
data-*属性（如data-expanded="true"、data-loaded="1）、事件监听器、焦点状态 - 加载新层级时，优先复用已有 DOM 节点：查
document.querySelectorAll('[data-level="3"][data-parent-id="123"]')，有则el.style.display = 'block'，无则创建 - 避免用
offsetTop判断位置——它会触发强制同步布局；改用el.getBoundingClientRect().top或 IntersectionObserver
折叠态与加载态必须解耦存储
多层级结构里，“是否展开”和“是否已加载子数据”是两个独立状态，混在一起就会错乱：
- 错误写法：
if (item.expanded && !item.children.length) loadChildren(item.id)—— 展开但没加载，用户点开瞬间卡住 - 正确做法：用两个布尔字段分开存，例如
data-expanded="true"和data-children-loaded="false" - 加载完成回调里只改
data-children-loaded="true"，不碰data-expanded；切换展开状态时只改前者，不触发请求 - 后端返回子列表时，必须带唯一
parent_id和depth，前端按此匹配到对应父节点下，避免插入错层
虚拟滚动叠加多层级时的 top 定位陷阱
如果整个多层级列表用了虚拟滚动（比如外层固定高度 + position: absolute 定位），子层级的 top 值不能简单累加：
- 错误：子项
top = parentTop + 48 * index—— 父级高度变化（比如展开后内容变高）会导致子项错位 - 正确：每层都基于全局行序号计算偏移，例如
top = (globalRowIndex) * itemHeight，其中globalRowIndex是从头数到当前项的总序号（含所有展开/收起的节点） - 必须维护一个扁平化索引映射表：
{ 'node-123': { start: 45, count: 12 } }，滚动更新时查表算范围，而非递归遍历 DOM - 禁止对子层级使用
transform: translateY()—— selection 坐标系会失准，光标定位失效
多层级无限滚动最难的不是加载，而是让每一层节点在“看不见”时仍保持可寻址、可聚焦、可恢复状态。销毁是懒办法，隔离才是稳解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
