<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>深度遍历和广度遍历测试</title>

    <style type="text/css">

    </style>

</head>

<body>

<div class="box">

   <ul class="menus">

      <li class="item1"><i class="item1-icon"></i><span class="item1-content">菜单1</span></li>

      <li class="item2"><i class="item2-icon"></i><span class="item2-content">菜单2</span></li>

      <li class="item3"><i class="item3-icon"></i><span class="item3-content">菜单3</span></li>

   </ul>

</div>

<script>

console.log('深度优先递归');

DFTRecur(document.body,[],function(item){

    console.log(item);

});

console.log('深度优先非递归');

let res = DFT(Array.from(document.body.children),function(item){

    // if(item.className == 'item2-content'){

    //     console.log('taget item', item);

    //     return true;

    // }

    console.log(item);

});

console.log('广度优先递归');

BFTRec(document.body,[]);

console.log('广度优先非递归');

BFT(Array.from(document.body.children));

//深度优先搜索的递归写法

function DFSRecur(root,stack,fVistor) {

    let b = false;

    if (root != null) {

        stack.push(root);

        //函数fVistor，节点传入函数，节点一旦满足某种条件，就返回true

        //可以在找到第一个满足条件的节点后，就停止遍历

        if(fVistor(root))return true;

        var children = root.children;

        if(children){

            for (var i = 0; i < children.length; i++){

                b = DFTRecur(children[i],stack,fVistor);

                //有一个子节点满足条件就停止循环

                if(b) break;

            }

        }

        //当前节点及其子节点都不满足条件就出栈

        if(!b) stack.pop();

    }

    return b;

}

//深度优先遍历的递归写法，深度优先遍历递归，不需要使用栈，通常是使用先序遍历，即先遍历根节点，再遍历所有子节点

function DFSRecur(root,stack,fVistor) {

    if (root != null) {

        fVistor(root)

        var children = root.children;

        if(children){

            for (var i = 0; i < children.length; i++){

                DFTRecur(children[i],stack,fVistor);

            }

        }

    }

}

//深度优先遍历的非递归写法

function DFT(root,fVistor) {

    fVistor = fVistor || console.log;

    if (root != null) {

        //兼容root为数组，且从前往后深度遍历

        var stack = [].concat(root).reverse();

        while (stack.length != 0) {

            var item = stack.pop();

            //满足条件就break，使得方法兼具深度优先搜索的功能，找到就跳出循环，停止查找

            if(fVistor(item)) break;if(item.children) stack.push(...Array.from(item.children).reverse());

        }

    }

}

//广度优先遍历的递归写法，广度优先的递归和非递归写法都需要队列

function BFTRec(root,queue,fVistor){

    fVistor = fVistor || console.log;

    if(root != null){

       queue.push(root);

       //满足条件return，使该方法兼具广度优先搜索的功能，找到就停止遍历

       if(fVistor(root)) return;

       //先访问下一个兄弟节点，递归会一直横向访问，直至横向访问完毕

       BFTRec(root.nextElementSibling,queue,fVistor);

       //回到本行的第一个节点root

       root = queue.shift();

       //跳到root节点的下一行的第一个节点，又会开始横向遍历

       BFTRec(root.firstElementChild,queue,fVistor);

    }

}

//广度优先遍历的非递归写法

function BFT(root,fVistor) {

    fVistor = fVistor || console.log;

    if (root != null) {

        //兼容root为数组情况

        var queue = [].concat(root);

        while (queue.length != 0) {

            var item = queue.shift();

            //找到就break，使得方法兼具广度优先搜索功能，找到就停止遍历

            if(fVistor(item)) break;

            if(item.children) queue.push(...item.children);

        }

    }

}

</script>

</body>

</html>

Dom的深度优先遍历和广度优先遍历的更多相关文章

  1. 深度优先遍历 and 广度优先遍历

    深度优先遍历 and 广度优先遍历 遍历在前端的应用场景不多,多数是处理DOM节点数或者 深拷贝.下面笔者以深拷贝为例,简单说明一些这两种遍历.

  2. js实现深度优先遍历和广度优先遍历

    深度优先遍历和广度优先遍历 什么是深度优先和广度优先 其实简单来说 深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历, 如下图所示 1.深度优先 2.广度优先 两者的区别 对于算法来说 无非就是时 ...

  3. C++ 二叉树深度优先遍历和广度优先遍历

    二叉树的创建代码==>C++ 创建和遍历二叉树 深度优先遍历:是沿着树的深度遍历树的节点,尽可能深的搜索树的分支. //深度优先遍历二叉树void depthFirstSearch(Tree r ...

  4. 邻接矩阵ｃ源码（构造邻接矩阵，深度优先遍历，广度优先遍历，最小生成树prim,kruskal算法）

    matrix.c #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include < ...

  5. C++编程练习(9)----“图的存储结构以及图的遍历“（邻接矩阵、深度优先遍历、广度优先遍历）

    图的存储结构 1)邻接矩阵 用两个数组来表示图,一个一维数组存储图中顶点信息,一个二维数组(邻接矩阵)存储图中边或弧的信息. 2)邻接表 3)十字链表 4)邻接多重表 5)边集数组 本文只用代码实现用 ...

  6. js实现对树深度优先遍历与广度优先遍历

    深度优先与广度优先的定义 首先我们先要知道什么是深度优先什么是广度优先. 深度优先遍历是指从某个顶点出发,首先访问这个顶点,然后找出刚访问这个结点的第一个未被访问的邻结点,然后再以此邻结点为顶点,继续 ...

  7. python、java实现二叉树，细说二叉树添加节点、深度优先（先序、中序、后续）遍历 、广度优先 遍历算法

    数据结构可以说是编程的内功心法,掌握好数据结构真的非常重要.目前基本上流行的数据结构都是c和c++版本的,我最近在学习python,尝试着用python实现了二叉树的基本操作.写下一篇博文,总结一下, ...

  8. 【图的遍历】广度优先遍历（DFS）、深度优先遍历（BFS）及其应用

    无向图满足约束条件的路径 •[目的]:掌握深度优先遍历算法在求解图路径搜索问题的应用 [内容]:编写一个程序,设计相关算法,从无向图G中找出满足如下条件的所有路径:  (1)给定起点u和终点v.  ( ...

  9. 二叉树的深度优先遍历与广度优先遍历 [ C++ 实现 ]

    深度优先搜索算法(Depth First Search),是搜索算法的一种.是沿着树的深度遍历树的节点,尽可能深的搜索树的分支. 当节点v的所有边都己被探寻过,搜索将回溯到发现节点v的那条边的起始节点 ...

随机推荐

  1. js、jquery中全局替换replace

    str.replace(/需要替换的/g,"新字符串") //此处使用正则表达式

  2. motto - Express 4.x Request对象获得参数方法

    本文搜索关键字:motto express node js nodejs javascript request body request.body 1. req.param() 该方法获得参数最为方便 ...

  3. layer 点击弹出图片

    今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo success:function (e) { var url = e.qrcode_url; //a ...

  4. JAVAOOP接口

    狭义接口:用来约束实现类中方法的长相的. 广义接口:已将编写好的功能. 1.接口中的方法都是抽象方法,没有方法体,必须被子类重写 2.java的接口变量都是静态常量 3.接口方法只不过是用来约束现实类 ...

  5. scrapy--Cookies

    大家好,之前看到的关于cookies的应用,由于有段时间没看,再看的时候花了一些时间,来给大家总结下.本文是根据:"http://www.bubuko.com/infodetail-2233 ...

  6. tcl之文件操作-文件名相关

  7. C++基础 匿名对象

    以下几种情况又会匿名对象 (1)对象构造 与 匿名对象 Test t1 = Test(); 这时,Test()会构造匿名对象,并且是调用无参构造函数,然后 t1 将匿名对象扶正. (2)对象赋值 与 ...

  8. ### Cause: java.lang.reflect.UndeclaredThrowableException

    ### Cause: java.lang.reflect.UndeclaredThrowableException Caused by: org.apache.ibatis.exceptions.Pe ...

  9. js石头剪刀布小游戏

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  10. P1875 佳佳的魔法药水

    P1875 佳佳的魔法药水 题目描述 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的病只有一种办法,那就是传说中的 0 号药水 ……怎么样才能 ...