<!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. 8-1 python 接口开发（提供数据、返回session_id）

    1.接口开发,根据不同查询条件返回数据库查询结果 import flask import tools import json server = flask.Flask(__name__) #新建一个服 ...

  2. H5之audio标签放音兼容所有浏览器方法

    前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...

  3. python__基础 : 异常处理与自定义异常

    异常处理方法一般为: try: ------code----- except Exception as e: # 抛出异常之后将会执行 print(e) else: # 没有异常将会执行 print( ...

  4. 关于json输出为null？

    原因: 该字符中含了ASCII码ETB控制符,即\x17导致json解析失败   解决方案: $params = preg_replace('/[\x00-\x1F]/', '', $params); ...

  5. 嵌入式Linux编译内核步骤 / 重点解决机器码问题 / 三星2451

    嵌入式系统更新内核 1. 前言 手里有一块Friendly ARM的MINI2451的板子,这周试着编译内核,然后更新一下这个板子的Linux内核,想要更新Linux Kernel 4.1版本,但是种 ...

  6. 准备篇（二）C语言

    因为C语言部分打算单独维护,所以 目录: 1. C语言基础篇(零)gcc编译和预处理 2. C语言基础篇(一)关键字 3. C语言基础篇(二)运算符 4. C语言指针篇(一)指针与指针变量 5. C语 ...

  7. Linux设置下载站点

    https://blog.csdn.net/jfhkd2012/article/details/50912757

  8. [BZOJ1009][HNOI2008]GT考试(KMP+DP)

    [不稳定的传送门 Solution dp[i][j]表示前i个字符当前匹配到不吉利串的第j个,即当前方案的后缀等于不吉利串前缀 然而由于n过大,不能直接转移,用矩阵优化 Code #include & ...

  9. Java线程和多线程（六）——守护线程

    当我们在Java中创建线程的时候,这个线程在默认的情况下是一个用户线程,并且,如果这个线程在运行,那么JVM就不会终结这个应用.和用户线程不同,当一个线程被标记为守护线程的时候,JVM在用户线程结束的 ...

  10. mysql 中的基本用法，以及日期的转换

    1.mysql int(10) int 类型长度4个字节,大约表示2^32数字,10代表的是显示长度,一般和FILLZERO约束一起使用,如果没有达到该长度,填充02-->000000002 m ...