JavaScript怎么实现DOM树的深度优先遍历和广度优先遍历

  介绍

这篇文章主要介绍了JavaScript怎么实现DOM树的深度优先遍历和广度优先遍历,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

深度优先遍历
//非递归,首次传入的节点值为DOM树中的根元素点,即html//调用:深(document.documentElement)   函数深(节点){   var res=[];//存储访问过的节点   如果(节点!=null) {   var节点列表=[];//存储需要被访问的节点   nodeList.push(节点);   而(节点列表。长度比;0){   var currentNode=nodeList.pop ();//当前正在被访问的节点   res.push (currentNode);   var儿童=currentNode.children;   我(var=儿童。长度- 1;我在=0;我(){   nodeList.push(儿童[我]);   }   }   }   返回res;   }//使用递归   var res=[];//存储已经访问过的节点   函数深(节点){   如果(节点!=null){//该节点存在   res.push(节点);//使用儿童变量存储node.children,提升性能,不使用node.children.length,从而不必在为循环遍历时每次都去获取子元素   (var=0,儿童=node.children;我& lt;childrens.length;我+ +){   深(儿童[我]);   }   }   返回res;   }
广度优先遍历
//递归   var res=[];   函数宽(节点){   如果(res.indexOf(节点)===1){   res.push(节点);//存入根节点   }   var儿童=node.children;   (var=0;我& lt;childrens.length;我+ +){   如果(儿童[我]!=null) {   res.push(儿童[我]);//存入当前节点的所有子元素   }   }   (var j=0;j & lt;childrens.length;j + +) {   宽(儿童[j]);//对每个子元素递归   }   返回res;   }//非递归   函数宽(节点){   var res=[];   var节点列表=[];//存储需要被访问的节点   nodeList.push(节点);   而(节点列表。长度比;0){   var currentNode=nodeList.shift (0);   res.push (currentNode);   (var=0,儿童=currentNode.children;我& lt;childrens.length;我+ +){   nodeList.push(儿童[我]);   }   }   返回res;   }

感谢你能够认真阅读完这篇文章,希望小编分享JavaScript怎么实现DOM树的深度优先遍历和广度优先遍历内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

JavaScript怎么实现DOM树的深度优先遍历和广度优先遍历