递归遍历dom树多级菜单

最新推荐文章于 2023-03-28 20:03:08 发布

蝶飞依心

最新推荐文章于 2023-03-28 20:03:08 发布

阅读量349

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/diefeiyixin/article/details/124351264

版权

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .menu p {
            width: 100px;
            border: 3px solid;
            margin: 5px;
        }

        .menu>div p {
            margin-left: 10px;
            border-color: red;
        }

        .menu>div>div p {
            margin-left: 20px;
            border-color: green;
        }

        .menu>div>div>div p {
            margin-left: 30px;
            border-color: yellow;
        }
    </style>
</head>

<body>
    <div class="menu">
        <!-- <div>
        <p>第一级菜单</p>
        <div>
          <p>第二级菜单</p>
          <div>
            <p>第三级菜单</p>
          </div>
        </div>
      </div> -->
    </div>
    <script>
        //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
        let arr = [
            {
                type: '电子产品',
                data: [
                    {
                        type: '手机',
                        data: ['iPhone手机', '小米手机', '华为手机']
                    },
                    {
                        type: '平板',
                        data: ['iPad', '平板小米', '平板华为']
                    },
                    {
                        type: '智能手表',
                        data: []
                    }
                ]
            },
            {
                type: '生活家居',
                data: [
                    {
                        type: '沙发',
                        data: ['真皮沙发', '布沙发']
                    },
                    {
                        type: '椅子',
                        data: ['餐椅', '电脑椅', '办公椅', '休闲椅']
                    },
                    {
                        type: '桌子',
                        data: ['办公桌']
                    }
                ]
            },
            {
                type: '零食',
                data: [
                    {
                        type: '水果',
                        data: []
                    },
                    {
                        type: '咖啡',
                        data: ['雀巢咖啡']
                    }
                ]
            }
        ]

        console.log(arr)
        
        //渲染dom树
        /* 递归: 函数内部调用自己 */
        // 封装一个函数添加dom
        function addElement(arr, father) {
            // 遍历arr数组
            for (let i = 0; i < arr.length; i++) {
                //(1)创建 div 标签
                let div = document.createElement('div')
                //(2)设置内容
                div.innerHTML = `<p>${arr[i].type || arr[i]}</p>`
                //(3)添加到父元素上
                father.appendChild(div)
                 //如果有下级菜单，继续递归添加
                  /* 
                 如果 arr[i] 有data属性,说明有下级菜单
                 如果没有这行递归,这个函数永远只能加载1级菜单
                 如果有这行递归,只要当前菜单有data属性,就会自动继续调用(遍历数组,添加到父元素)
                 */
                 if (arr[i].data) {
                    addElement(arr[i].data, div)
                }
            }
        }

        //调用函数
        addElement(arr, document.querySelector('.menu'))

    </script>
</body>

</html>

蝶飞依心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
递归遍历dom树多级菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title
复制链接

扫一扫