草庐IT

仅限 Javascript 的 DOM 树遍历 - DFS 和 BFS？

coder 2024-05-15 原文

任何人都可以提供代码、伪代码，甚至提供良好的链接以在纯 JavaScript(没有 JQuery 或任何辅助库)中实现 DFS(深度优先搜索)和 BFS(广度优先搜索)吗？我一直试图了解如何实现这两种遍历，但我似乎无法真正区分 BFS 和 DFS 实现的区别。

如果我们想要一个具体的问题作为示例:我想在给定节点向下遍历 DOM，并获取所有类名。

(我能想到的唯一遍历方法是遍历每个父节点，从该节点获取我需要的东西，在这个例子中是类名，然后看看他们是否有 child ，递归每个 child 。我相信这是 DFS？同样，我很难理解 DOM 遍历实现中的差异!)

最后，抱歉，如果这是重复的。我到处搜索好的、清晰的例子，但没有找到任何好的答案!如果已经有好的答案，请告诉我:)

最佳答案

让我们以下面的 HTML 代码为例:

<div class="a">
    <div class="aa">
        <span class="aaa">
        </span>
        <span class="aab">
        </span>
    </div>
    <div class="ab">
        <span class="aba">
        </span>
        <span class="abb">
        </span>
    </div>
</div>

DFS总是先进入下一层节点，只有当没有更多未遍历的子节点时，才会进入当前层的下一个节点。

DFS 将按以下顺序遍历示例的节点:

a, aa, aaa, aab, ab, aba, abb

BFS总是会先遍历当前层的所有节点，然后才会去到下一层节点。

BFS 将按以下顺序遍历示例的节点:

a, aa, ab, aaa, aab, aba, abb

您应该使用其中的哪一个并没有明确的答案。通常这取决于您的需求。

实现细节:

对于 DFS，人们通常使用 stack .

伪代码:

stack my_stack;
list visited_nodes;
my_stack.push(starting_node);

while my_stack.length > 0
   current_node = my_stack.pop();

   if current_node == null
       continue;
   if current_node in visited_nodes
      continue;
   visited_nodes.add(current_node);

   // visit node, get the class or whatever you need

   foreach child in current_node.children
      my_stack.push(child);

此代码将执行到堆栈中有任何节点为止。在每一步中，我们都获取堆栈中的顶部节点，如果它不为空并且我们之前没有访问过它，那么我们将访问它并将其所有子节点添加到堆栈中。

Queue通常用于 BFS。

伪代码:

queue my_queue;
list visited_nodes;
my_queue.enqueue(starting_node);

while my_queue.length > 0
   current_node = my_queue.dequeue();

   if current_node == null
       continue;
   if current_node in visited_nodes
      continue;
   visited_nodes.add(current_node);

   // visit node, get the class or whatever you need

   foreach child in current_node.children
      my_queue.enqueue(child);

这段代码将一直执行到队列中有任何节点为止。在每一步中，我们都会获取队列中的第一个节点，如果它不为空并且我们之前没有访问过它，那么我们会访问它并将其所有子节点添加到队列中。

请注意，这两种算法的主要区别在于我们使用的数据类型。

关于仅限 Javascript 的 DOM 树遍历 - DFS 和 BFS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39503861/

JavascriptDOMcurrent_nodecurrentnodetraversaldepth-first-searchbreadth-first-search

有关仅限 Javascript 的 DOM 树遍历 - DFS 和 BFS？的更多相关文章

  1. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  2. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  3. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  4. ruby - 如何遍历 Ruby 中所有正则表达式匹配的字符串？ - 2

    我们有一个字符串:“”这个正则表达式://i如何从当前字符串中获取所有匹配项？ 最佳答案 "".scan(//)参见scan在ruby​​-docs上 关于ruby-如何遍历Ruby中所有正则表达式匹配的字符串？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6857852/

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 循环遍历数组的元素 - 2

    我想从0到2循环@a:0,1,2,0,1,2。defset_aif@a==2@a=0else@a=@a+1endend也许有更好的方法？ 最佳答案 (0..2).cycle(3){|x|putsx}#=>0,1,2,0,1,2,0,1,2item=[0,1,2].cycle.eachitem.next#=>0item.next#=>1item.next#=>2item.next#=>0... 关于ruby-循环遍历数组的元素，我们在StackOverflow上找到一个类似的问题：

  8. ruby-on-rails - 如何在 Rails View 中遍历数组？ - 2

    我在MySql中进行了查询，但在Rails和mysql2gem中工作。信息如下:http://sqlfiddle.com/#!2/9adb8/6查询工作正常，没有问题，并显示以下结果:UNITV1A1N1V2A2N2V3A3N3V4A4N4V5A5N5LIFE200120000000000ROB010012000000000-为rails2.3.8安装了mysql2gemgeminstallmysql2-v0.2.6-创建Controller:classPolicyController这是日志:SQL(0.9ms)selectdistinct@sql:=concat('SELECTpb

  9. ruby - Ruby 中的目录遍历 - 2

    我一直在尝试使用简单的递归方法在Ruby中为一个更大的程序的一部分实现目录遍历。但是我发现Dir.foreach不包括其中的目录。我怎样才能列出它们？代码:defwalk(start)Dir.foreach(start)do|x|ifx=="."orx==".."nextelsifFile.directory?(x)walk(x)elseputsxendendend 最佳答案 问题是每次递归，你传递给File.directory?的路径isno只是实体(文件或目录)名称；所有上下文都丢失了。所以说你进入one/two/three/检

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐