语义化骨架树形控件性能起点在HTML结构：用ul/li+data-*属性，利用浏览器原生优化；节点需data-id和data-expandable="true"（叶子节点不设）；子列表默认hidden；动态创建用createElement而非innerHTML；事件委托绑定容器并用closest定位；展开/折叠用max-height过渡；编辑态用动态input替代contenteditable，确保DOM、ARIA、数据三同步。
用 ul/li + data-* 属性构建语义化骨架
树形控件性能起点不在 JS 逻辑，而在 HTML 结构本身。浏览器对 <ul><li> 的嵌套层级有原生优化，比 <div> 套 <div> 渲染快、重排少、无障碍支持好。
每个节点必须带 data-id 和 data-expandable="true"（叶子节点不设该属性），子列表默认加 style="display:none" 或 hidden，避免初始渲染时全量展开。
- 别用
innerHTML +=拼接整棵树——会销毁已绑定事件、丢失焦点状态、触发 XSS 风险 - 动态创建节点优先用
document.createElement('li')+element.setAttribute('data-id', id) - 给每个
li元素挂原始数据引用：li.__data = nodeData，后续操作直接读取，不查 DOM
事件委托必须绑定到容器，而非单个节点
懒加载节点初始不存在 DOM，直接给 .tree-toggle 绑 click 必然失效。正确做法是监听树容器，用 event.target.closest() 定位目标。
示例代码中常见错误是漏掉 event.stopPropagation()，导致点击复选框或内部按钮也触发父节点展开。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听器只挂一次：
treeContainer.addEventListener('click', handler) - 判断目标是否可展开：
const btn = e.target.closest('[data-expandable]')，再检查btn && !btn.disabled - 获取节点 ID 用
btn.dataset.id，比解析文本或遍历父级更稳定、更轻量
展开/折叠不要用 display 切换，改用 max-height 过渡
display: none → block 无法做 CSS 动画，用户感知不到层级变化；而 height: auto 不支持 transition，硬写会卡顿或截断。
折中方案是设固定上限值：max-height: 0 → max-height: 500px，配合 overflow: hidden 和 transition: max-height 0.2s ease-in-out。
- 500px 覆盖多数场景，若节点内容超长（如带多行描述），需按实际调整
- 务必重置
ul的margin和padding-left，否则缩进错乱 - 切换时同步更新
aria-expanded属性，屏幕阅读器靠它判断状态
编辑态必须脱离 contenteditable，用动态 input 替代
给节点加 contenteditable="true" 看似简单，实则破坏 ARIA 语义、干扰键盘导航、让屏幕阅读器反复播报混乱状态。
真实生产环境的编辑流程是：点击 → 移除原文本 span → 插入 input[type="text"] → focus() + select() → Enter/Escape/blur 后还原 DOM 并同步数据。
- 编辑中拦截
ArrowUp/Down/Left/Right，调用event.preventDefault() - 编辑结束立即恢复树的键盘监听，并把焦点设回当前节点的可聚焦元素（如带
tabindex="0"的span） - 提交后不仅要改 DOM 文本，还要更新内存数据对象、
aria-label、甚至父级的aria-setsize
最易被忽略的是：编辑完成后的 DOM 还原必须原子化——文本、ARIA 属性、数据模型三者必须同步，否则搜索高亮、懒加载触发、父子联动都会出错。
