本文给大家介绍JavaScript关于DOM节点的深度优先和广度优先遍历,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
html的树形结构如上
对于树的深度优先遍历,执行结果应该如下:
var arr=[]; //深度优先 function traversalDFSDOM (rootDom) { if(!rootDom)return; if(rootDom.children.length==0){ arr.push(rootDom)//没有孩子节点,表示是个叶子节点,将节点push到数组中 return; } arr.push(rootDom)//非孩子节点,在每次遍历它的孩子节点之前先把它push到数组中 for(var i=0;i<rootdom.children.length><p>结果如下</p><p style="text-align: center;"><img src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt=""></p><p>(script标签写在body外面,但是执行的时候浏览器会把它放到body中,变成最后一个元素)<br></p><h5>采用非递归的方式</h5><pre class="brush:php;toolbar:false"> //深度优先非递归 function traversalDFSDOM(rootDom) { if(!rootDom)return; var stack=[] var node = rootDom; while(node!=null){ arr.push(node); if(node.children.length>=0){ for(let i=node.children.length-1;i>=0;i--) stack.unshift(node.children[i]); } node = stack.shift() } } traversalDFSDOM(bodyDom)
非递归主要采取模拟队列的方法过程:
以此类推,需要注意的是i的循环需要从node.children.length-1开始到0
对于DOM树的广度优先遍历的结果应该如下
var stack=[bodyDom];//bodyDom是遍历的根节点 function traversalBFSDOM (count) { count = count || 0; if (stack[count]) { var children = stack[count].children; for (let i = 0; i <pre class="brush:php;toolbar:false">traversalBFSDOM(0)
function traversalBFSDOM (rootDom) { if(!rootDom)return; arr.push(rootDom) var queue = [rootDom]; while(queue.length){ var node = queue.shift(); if(!node.children.length){ continue; } for(var i=0;i<node.children.length><p>主要采用先进先出的思想,依次遍历每个节点下的孩子节点。</p><p>运行结果如下:</p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/297/941/277/1539247690616429.png" title="1539247690616429.png" alt="6.png" style="max-width:90%" style="max-width:90%"></p><p>学习是个过程,学会深入学习</p><p>总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问<a href="http://www.php.cn/course/list/17.html" target="_blank">JavaScript视频教程</a>!</p><p>相关推荐:</p><p class="art_xg"><a href="http://www.php.cn/" target="_blank">php公益培训视频教程</a></p><p><a href="http://www.php.cn/js-tutorial.html" target="_blank">JavaScript图文教程 </a></p><p><a href="http://www.php.cn/course/26.html" target="_blank">JavaScript在线手册</a></p></node.children.length>