如何实现将 HTML 文档解析为分离文本与标记的嵌套对象数组？

本文共计1128个文字，预计阅读时间需要5分钟。

本文字介绍一种基于递归遍历DOM树的专业方法，用于处理DOM元素。该方法不涉及图形解释，不使用数字，不超过100字，直接输出结果：

在前端开发中，有时需要对 HTML 内容进行语义化结构分析——例如实现富文本编辑器的内容序列化、无障碍辅助解析、或自定义 Markdown/HTML 混合渲染器。核心挑战在于：必须严格保持 DOM 渲染时的节点顺序，同时区分纯文本内容（Text 节点）与 HTML 标记（Element 节点），尤其当元素存在嵌套或相邻兄弟元素时，闭合标签的位置极易出错。

使用 TreeWalker 或线性遍历 childNodes 的迭代逻辑容易陷入边界判断困境（如父元素末尾闭合时机、子元素与文本混排时的插入顺序）。而递归深度优先遍历（DFS）天然契合 DOM 树结构，能自动保证：

• 开始标签在子内容之前；
• 所有子节点（含文本与嵌套元素）被完整处理；
• 结束标签在子内容之后 —— 完全符合 HTML 渲染流。