HTML树形展示依赖DOM天然层级结构，但需CSS+JS实现交互功能；details/summary可语义化折叠，适合简单场景；自定义组件需管理状态、无障碍属性和视觉线索。
HTML 本身没有“树形组件”这个内置概念，所谓的“树形展示”完全依赖 DOM 的天然层级结构来实现，div 套 div、ul 嵌 li，本质就是一棵 HTML 树。但光有结构不等于有交互式树形效果——展开/折叠、图标、连线、懒加载这些，全靠 CSS + JavaScript 补足。
DOM 层级就是 HTML 树形的物理基础
浏览器解析 HTML 后生成的 DOM 树，节点父子关系直接对应源码缩进和嵌套。比如：
<ul class="tree">
<li>文档</li>
<li>图片
<ul>
<li>png</li>
<li>jpg</li>
</ul>
</li>
</ul>
这段代码天然形成两级树形层级。但默认状态下所有子 ul 都是展开的，没有折叠态、无图标、无点击响应——这说明：DOM 层级只是必要条件，不是充分条件。
用 details/summary 快速实现语义化折叠树
这是原生、轻量、无障碍友好的方案，适合静态或简单动态场景，无需 JS 就能控制显隐：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
details元素默认可折叠，open属性控制初始展开状态 -
summary是唯一允许的直接子元素，点击即触发切换 - 嵌套多个
details即可形成多级树，浏览器自动维护状态 - 不支持 IE，Edge 79+、Chrome 12+、Firefox 49+ 可用
示例：
<details>
<summary>前端</summary>
<details>
<summary>框架</summary>
<p>React / Vue / Svelte</p>
</details>
<p>HTML / CSS / JS</p>
</details>
自定义树形组件必须手动管理展开状态和 DOM 显隐
当需要图标、拖拽、右键菜单、异步加载子节点时，就得自己写逻辑。关键点在于：
- 不能只靠 CSS
display: none控制子节点——它破坏语义，影响屏幕阅读器和 SEO - 推荐用
aria-expanded+aria-hidden配合max-height过渡动画（或transform: scaleY()）实现可访问的动效 - 每个节点需有唯一
id，父节点通过data-parent-id关联，便于 JS 定位和状态同步 - 避免在深层嵌套中反复查询 DOM，建议用扁平化数据 + 渲染函数按需生成子树
常见翻车点：querySelectorAll('li ul') 在动态增删后失效；用 innerHTML 替换整棵树会丢失事件监听；未重置 tabindex 导致键盘导航断裂。
CSS 线条与缩进对“树形感”的影响远超预期
用户是否觉得这是棵树，60% 以上取决于视觉线索。纯靠 margin-left 缩进不够，容易误判层级。真正起作用的是：
- 垂直连接线：用伪元素
::before+border-left+border-bottom拼出 L 形线条 - 同级对齐：确保同一深度的所有
summary或标题左边缘严格对齐，哪怕字体大小不同也要用box-sizing: border-box统一盒模型 - 图标一致性：展开态用 ▼，折叠态用 ▶，且尺寸、颜色、垂直居中方式统一，否则视觉节奏被打断
- 禁用
user-select: none在可交互区域外——它会让辅助技术误判为非内容区
最易被忽略的细节：当某节点展开后高度变化，其下方兄弟节点的连接线位置可能错位，必须用相对定位或 flex 布局做弹性对齐。
