DOM树遍历的JS实现DFS&BFS
时间:2023-04-03 00:17:27
HTML
我们一般可以使用DFS(深度优先遍历)和BFS(广度优先遍历)来遍历DOM树。DFS&BFS介绍下面结合具体例子来分析一下,给出HTML代码片段如下:
DFS总是先进入下一层节点,只有下一层没有pending时才会遍历子节点才会进入当前层的其他节点。对于上面的例子,DFS遍历结果应该是:root,container,sidebar,menu,main,post,copyrightBFS总是先遍历当前层级的所有节点,只有在当前层级的所有节点之后才进入下一层已经遍历。对于上面的例子,BFS遍历结果应该是:root,container,sidebar,main,menu,post,copyright。DFS的具体实现主要是通过递归实现,依次遍历节点。如果遍历的节点有子节点,则开始遍历子节点printInfo(root,rootLayer)//如果有子节点,直接遍历子节点,同时层级加1if(root.children.length){DFSTraverse(root.children,rootLayer+1)}}}BFS的具体实现BFS采用了queue的思想,采用dequeue的方式遍历节点。如果节点有子节点,则将子节点入队(这里处理节点层级的方式比DFS复杂,因为这里所有的节点都放在同一个数组中处理)constBFSTraverse=(rootNodes,rootLayer)=>{constroots=Array.from(rootNodes)constrootsLayer=[]//使用单个数组来存储每个节点的级别//Initializefor(leti=0;i
{varstr=''for(leti=1;i