DOM树最大深度问题

最新推荐文章于 2024-03-22 20:20:59 发布

前端小学生er

最新推荐文章于 2024-03-22 20:20:59 发布

阅读量700

点赞数 1

文章标签： javascript dom操作

本文链接：https://blog.csdn.net/weixin_38434088/article/details/115182625

版权

本文探讨了如何寻找DOM树的最大深度，涉及DOM接口如children的使用，以及递归计算深度的两种方法。通过分析两种递归方式，解释了自由变量与值传递的区别，并指出在涉及循环的递归情况下实现尾递归优化的挑战。

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

文章目录

前言
一、基础准备
- 1.相关的DOM接口
二、开始计算深度
- 1.初始递归
- 2.结合DOM操作
总结

前言

找一棵DOM树的最大深度，涉及到DOM操作的Api和一些关于闭包的思考，以及考虑如何使用尾调用优化递归问题。

一、基础准备

1.相关的DOM接口

document.body // 获取根节点
document.body.children //获取根节点孩子节点
document.body.childElementCount //获取根节点孩子节点个数

注意这里用了children这个属性，而没有用childNodes,是因为children返回的数据类型是HTMLCollection只能包含 HTML 元素节点，不会包含一些空的文本节点。至于二者的区别大家可以参考Javaccript教程

二、开始计算深度

1.初始递归

第一种方式：

var maxDepth = function(root) {
   
    let max_depth = 0,
        depth = 0
    function dfs(root) {
   
        if(!root) {
   
            return 0
        }
        depth++
        if(depth > max_depth) {
   
            max_depth = depth
        }
        for(let ele of root.children) {
   
            dfs(ele)
        }
        depth--
    }
    dfs(root)
    

    return max_depth
    
};