JavaScript树形组件核心是递归遍历数据与DOM渲染，配合expanded/checked等状态管理；通过事件委托处理展开/收起、选中交互，优化仅操作局部DOM而非整树重绘。
用 JavaScript 实现树形组件，核心在于数据结构的递归遍历、DOM 的递归渲染，以及对节点展开/收起、选中、点击等交互的合理状态管理。不依赖框架的话，纯 JS + HTML/CSS 就能搞定，关键是把“父子嵌套”和“状态响应”理清楚。
树数据结构要带可扩展标识
原始数据通常是一组嵌套对象，每个节点至少需要：id、label、children（数组，可能为空），以及一个用于控制显示的 expanded 字段（布尔值，默认 true 或 false 都行，看业务需求）。
示例数据：
const treeData = [
{
id: '1',
label: '文档',
expanded: true,
children: [
{ id: '1-1', label: 'README.md', expanded: false, children: [] },
{
id: '1-2',
label: 'src',
expanded: true,
children: [
{ id: '1-2-1', label: 'index.js', children: [] }
]
}
]
}
];
用递归函数生成 DOM 结构
写一个渲染函数，接收节点列表和父级容器，对每个节点创建 <div class="tree-node">，内部包含：折叠图标、标签文本、可选的复选框、以及递归渲染子节点的容器。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<p>关键点：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>每个节点元素需绑定唯一 <code>data-id，方便后续事件定位
<div class="tree-children"> 包裹，初始根据 <code>expanded 决定是否 style.display = 'block' / 'none'
node.children 和对应子容器交互逻辑靠事件委托 + 状态更新
不要给每个节点单独绑事件——用事件委托监听整个树容器的 click，再根据 event.target 类名判断操作类型：
- 点「▶/▼」图标 → 切换该节点的
expanded状态，然后重新渲染（或仅切换子容器显隐） - 点文字或复选框 → 触发
select或toggleCheck，更新节点checked字段，并可联动处理父子关系（如：子全选则父自动选中） - 所有状态变更后，建议触发自定义事件（如
tree-change），方便外部监听
优化：避免整树重绘，只操作局部 DOM
每次展开/收起其实只需控制对应 .tree-children 的 display 样式，不需要重新生成所有 HTML。可以给每个节点 DOM 元素加一个引用 map：domMap[id] = nodeEl，这样状态变时直接查 DOM 操作，性能更稳。
如果节点很多（比如上千），再考虑虚拟滚动或懒加载（首次不渲染 children，点击展开时再请求或生成）。
基本上就这些。递归渲染不难，难点在状态同步和交互边界处理——比如点击父节点时要不要影响子节点选中态，是否支持多选+半选样式，这些都得在数据模型里提前想好字段（如 checked、indeterminate）。写清楚结构，剩下的就是细节打磨。
