JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】

前端之家收集整理的这篇文章主要介绍了JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JavaScript实现的DOM树遍历方法分享给大家供大家参考,具体如下:

二叉 DOM 树的遍历

前序遍历

首先访问根结点,然后遍历左子树,最后遍历右子树

修改为DOM二叉树:

中序遍历

首先遍历左子树,然后访问根结点,最后遍历右子树。

修改为DOM二叉树:

后序遍历

首先遍历左子树,然后遍历右子树,最后访问根结点。

修改为DOM二叉树:

多叉 DOM 树的遍历

广度优先遍历

首先遍历根节点,然后访问第一层节点,第二层节点,....,直到访问到最后一层。

借助于队列,用非递归的方式对多叉树进行遍历

深度优先遍历

首先遍历根节点,然后沿着一条路径遍历到最深的一层,最后在逐层返回。

借助于栈,实现多叉 DOM树 的深度优先遍历。

=0;i--){//按照相反的子节点顺序压入栈 stack.push(node.children[i]);//将该节点的所有子节点压入栈 } } node = stack.pop();//弹出栈的子节点顺序就是原来的正确顺序(因为栈是先入后出的) } };

二叉 DOM 树的前序、中序、后序遍历,是深度优先遍历的特例

因此,参考深度优先遍历,借助栈,可以以非递归的方式,实现二叉 DOM 树的 前序、中序和后序遍历

非递归实现二叉 DOM 树的前序遍历

非递归实现二叉 DOM 树的中序遍历

非递归实现二叉 DOM 树的后序遍历

① 每个节点,都压入栈两次; ② 在循环体中,每次弹出一个节点赋给node ③ 如果node仍然等于栈的头结点,说明node的孩子们还没有被操作过,应该把它的孩子们加入栈中 ④ 否则,说明是第二次弹出该节点,访问node。

也就是说,第一次弹出,将node的孩子压入栈中,第二次弹出,访问node

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章