本文介绍如何通过递归遍历 DOM，将具有层级关系的 HTML 元素（按 .child-elements-container 和 id 属性组织）转换为结构化 JavaScript 对象数组，每个对象包含 id 和其子元素的嵌套 children 属性。

本文介绍如何通过递归遍历 dom，将具有层级关系的 html 元素（按 `.child-elements-container` 和 `id` 属性组织）转换为结构化 javascript 对象数组，每个对象包含 `id` 和其子元素的嵌套 `children` 属性。

在处理嵌套容器类 DOM 结构（如可折叠的树形组件）时，常需将 HTML 的层级关系映射为内存中的嵌套数据结构，便于后续逻辑操作（如拖拽定位、状态保存或服务端同步）。本例中，.child-elements-container 作为子节点容器，其直接子

元素携带唯一 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: [] } ] 
//   }
// ]

✅ 关键设计说明：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 使用 :scope > div[id] 精确匹配直接子级且含 id 属性的
  ，避免误选 .element 或空容器；
• querySelector('.child-elements-container') 返回 null 时，传入一个空 div 元素（而非 null），使递归安全终止，避免 querySelector 在 null 上调用报错；
• Array.from() 替代扩展运算符 [...nodeList]，兼容性更佳（尤其在旧版 Safari 中）；
• 函数纯正无副作用，返回全新对象结构，便于测试与复用。

⚠️ 注意事项：

• 确保所有目标
  元素均设置合法 id（非空字符串、不以数字开头虽在 HTML5 中允许，但建议遵循 id="item-105" 等命名规范，提升可维护性）；
• 若存在动态插入内容，应在 DOM 更新后重新调用 getChildren()，或结合 MutationObserver 实现响应式更新；
• 如需反向查找（例如：已知 id="4"，快速定位其父级 id="105"），应构建索引映射表或使用 movedElement.closest('[id]') 向上遍历，而非依赖本函数（该函数专为向下树形导出设计）。

此方案轻量、可扩展，适用于任意深度的嵌套容器结构，是前端构建树形组件数据层的理想基础工具。