请使用深度优先搜索遍历一棵 DOM 树

最新推荐文章于 2024-05-21 09:00:12 发布

web老猴子

最新推荐文章于 2024-05-21 09:00:12 发布

阅读量266

点赞数

文章标签：深度优先面试前端

本文链接：https://blog.csdn.net/web220507/article/details/124682110

版权

本文介绍如何使用深度优先搜索遍历DOM树，将所有节点存入数组。讲解了题目分析、编码实现，强调难点在于理解递归，并提供了解题思路和建议。

摘要由CSDN通过智能技术生成

本题难度：⭐ ⭐ ⭐

本题类型：算法、手写

阿林最近忙爆了，真的没时间认真写文章了，但是再忙也不能忘了学习，不然就懈怠了，最近多更新点前端面试中出现的高频算法题吧，这个写起来简单。

题目描述

请使用深度优先搜索遍历一棵 Dom 树，最终把每个节点存进一个数组里，返回这个数组。

举个例子，输入的 html 和返回结果如下图：

题目分析

这题看似很高大上，实际上就是树的前序遍历，套树前序遍历的公式即可。

// 二叉树前序遍历，刷题公式
function preorderTraversal (root) {
  let res = []
  function dfs(root) {
    if (!root) {
      return res
    }
    res.push(root.val)
    dfs(root.left)
    dfs(root.right)
  }
  dfs(root)
  return res
}

需要注意的是 DOM 树每一层有多个节点，不再是二叉树遍历 left 和 right，而是遍历每个节点的 children。

编码实现

随便写一个 html 文件，里面放几个元素

<!DOCTYPE html>
<html lang="en">
<head>

最低0.47元/天解锁文章

web老猴子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
请使用深度优先搜索遍历一棵 DOM 树

本题难度：⭐ ⭐ ⭐本题类型：算法、手写阿林最近忙爆了，真的没时间认真写文章了，但是再忙也不能忘了学习，不然就懈怠了，最近多更新点前端面试中出现的高频算法题吧，这个写起来简单。题目描述请使用深度优先搜索遍历一棵 Dom 树，最终把每个节点存进一个数组里，返回这个数组。举个例子，输入的 html 和返回结果如下图：题目分析这题看似很高大上，实际上就是树的前序遍历，套树前序遍历的公式即可。// 二叉树前序遍历，刷题公式function preorderTraversal (root) {
复制链接

扫一扫