【手撕代码5】遍历dom树

深度遍历dom树，一个节点全部找完再找下一个

//深度遍历
const dfs=(rootnodes,rootlayer)=>{
  //把伪数组变成数组
  const roots=Array.from(rootnodes);
  
  while(roots.length){
    const root = roots.shift();
    console.log(rootlayer+""+root.tagName+root.className);
    if(root.children.length){
      dfs(root.children,rootlayer+1);
    }
  }
  
}
dfs(document.querySelectorAll('.root'),1);

广度遍历dom树，同层遍历完再遍历子节点

• 把外层的数据结构放入一个待搜索的队列（Queue）中，进而对这个队列进行遍历，当正在遍历的节点存在子节点（children）时则把此子节点下所有节点放入待搜索队列的末端。

const Bfs=(rootnodes,rootlayer)=>{
  const roots=Array.from(rootnodes);
  const rootlayers=[];//单用一个数组存放每个节点的层级
  //初始化,循环每个层级的节点有多少个
  for(let i=0;i