1、 null

2、 二叉树的递归本质：任意节点均可作为当前子树的根，递归地处理其左、右子树。

3、 实现代码的关键细节

4、 若当前节点非空，则将其显式转为布尔类型，用于条件判断与逻辑分支处理。

5、 6 }

6、 7 }

7、 若干核心实现要点说明

8、 divlist 是一个全局数组，用于累积并保存最终的遍历结果。对 JavaScript 初学者而言，node.firstElementChild 指代该节点的第一个元素级子节点（即逻辑上的左孩子），而 node.lastElementChild 则指向其最后一个元素级子节点（即右孩子）。这两个 DOM 属性常被用来在基于 HTML 结构模拟的二叉树中定位左右子节点，支撑前序、中序等遍历逻辑的准确实现。

9、 使用标准 DOM 树结构来类比和呈现二叉树形态

10、 递归由“递”与“归”两个阶段构成：“递”是向下深入，“归”是向上回溯。

11、 “递”的过程严格遵循代码书写与执行顺序，符合线性直觉，易于把握；需注意的是，在此过程中，每个函数调用都会被压入调用栈，形成清晰的嵌套结构，为后续回溯提供基础。

12、 “归”发生在递进抵达终止条件后，依据栈中保存的调用记录，逐层弹出并完成返回值计算或副作用操作，最终整合出整体结果。

13、 在先序遍历中，每次进入节点后立即访问，随后连续发起两次递归调用——分别对应左子树与右子树的遍历。

14、 起始传入的根节点编号为1；随着执行推进，在某一轮递归末端，调用栈中将呈现出特定的嵌套层次关系。

15、 当左子树全部访问完毕后，第一轮深度遍历暂告一段落。依据程序流程，紧接着将执行 preorder(node.lastElementChild)，转向右子树处理。由于节点4无右子节点，系统将依栈序依次回退，进而访问节点2与节点1的右子树。为加强理解，此处再次列出相关代码片段，以清晰展现遍历推进路径及结构演化顺序。

16、 若节点不为空，则统一转换为布尔值参与判断与流程控制。

17、 6 }

18、 7 }

19、 重点解析访问节点2的右子节点时的具体执行路径。

20、 当节点2被传入 preorder 函数时，仅完成了首次递归调用 preorder(node.firstElementChild)，即对其左子节点的处理；而第二次调用 preorder(node.lastElementChild)（即针对右子节点）尚未执行。依照语句顺序，下一步必须执行该调用，才能完成对该节点完整子结构的遍历。

21、 具体执行流程如下所示：

22、 此刻，调用栈中已依次压入节点5、6、7。

23、 小结

24、 递归并不神秘，它仍是顺序执行的代码，只是控制流呈现出嵌套与回退特征。函数持续自我调用直至触达边界条件，再沿调用链逐层返回，最终回到最外层入口，完成整棵二叉树的遍历任务。