介绍
这篇文章主要介绍了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树的深度优先遍历和广度优先遍历内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!