本文介绍如何通过递归遍历 DOM，将具有层级关系的 HTML 元素（按 .child-elements-container 和 id 属性组织）转换为结构化 JavaScript 对象数组，每个对象包含 id 和其子元素的嵌套 children 属性。
本文介绍如何通过递归遍历 dom，将具有层级关系的 html 元素（按 `.child-elements-container` 和 `id` 属性组织）转换为结构化 javascript 对象数组，每个对象包含 `id` 和其子元素的嵌套 `children` 属性。
在处理嵌套容器类 DOM 结构（如可折叠的树形组件）时，常需将 HTML 的层级关系映射为内存中的嵌套数据结构，便于后续逻辑操作（如拖拽定位、状态保存或服务端同步）。本例中，.child-elements-container 作为子节点容器，其直接子 <div> 元素携带唯一 id 属性，构成树的节点；而每个节点内部又可能嵌套新的 .child-elements-container，形成递归结构。
以下是一个简洁、健壮的递归函数实现：
const getChildren = (containerEl) => {
// 获取 containerEl 下所有直接子 div（即同级节点）
const directDivs = containerEl.querySelectorAll(':scope > div[id]');
// 对每个子 div 构建对象：id + 递归获取其 child-elements-container 中的 children
return Array.from(directDivs).map(div => ({
id: div.id, // 确保只处理带 id 的元素，避免空 id 或无效节点
children: getChildren(div.querySelector('.child-elements-container') || document.createElement('div'))
}));
};
// 从根容器开始遍历
const rootContainer = document.querySelector('.child-elements-container');
const treeStructure = getChildren(rootContainer);
console.log(treeStructure);
// 输出示例：
// [
// { id: "116", children: [] },
// {
// id: "105",
// children: [ { id: "4", children: [] } ]
// }
// ]✅ 关键设计说明：
- 使用 :scope > div[id] 精确匹配直接子级且含 id 属性的 <div>，避免误选 .element 或空容器；
- querySelector('.child-elements-container') 返回 null 时，传入一个空 div 元素（而非 null），使递归安全终止，避免 querySelector 在 null 上调用报错；
- Array.from() 替代扩展运算符 [...nodeList]，兼容性更佳（尤其在旧版 Safari 中）；
- 函数纯正无副作用，返回全新对象结构，便于测试与复用。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保所有目标 <div> 元素均设置合法 id（非空字符串、不以数字开头虽在 HTML5 中允许，但建议遵循 id="item-105" 等命名规范，提升可维护性）；
- 若存在动态插入内容，应在 DOM 更新后重新调用 getChildren()，或结合 MutationObserver 实现响应式更新；
- 如需反向查找（例如：已知 id="4"，快速定位其父级 id="105"），应构建索引映射表或使用 movedElement.closest('[id]') 向上遍历，而非依赖本函数（该函数专为向下树形导出设计）。
此方案轻量、可扩展，适用于任意深度的嵌套容器结构，是前端构建树形组件数据层的理想基础工具。
