js 树递归 生成 数组

Question

页面结构如下
`

<ul>
    <li>
        1
        <ul>
            <li>1-1
                <ul>
                    <li>
                        1-1-1
                    </li>
                </ul>
            </li>
            <li>1-2
                <ul>
                    <li>
                        1-2-1
                        <ul>
                            <li>
                                1-2-1-1
                            </li>
                            <li>
                                1-2-1-2
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2-1
                <ul>
                    <li>
                        2-1-1
                    </li>
                </ul>
            </li>
            <li>2-2</li>
        </ul>
    </li>
</ul>

`

需要生成的数组
`

[{
    t: '1',
    child: [{
        t: '1-1',
        child: [{
            t: '1-1-1'
        }]
    }, {
        t: '1-2',
        child: [{
            t: '1-2-1',
            child: [{
                t: '1-2-1-1'
            }, {
                t: '1-2-1-2'
            }]
        }]
    }]
},{
    t: '2',
    child: [{
        t: '2-1',
        child: [{
            t: '2-1-1'
        }]
    }, {
        t: '2-2',
        child: [{
            t: '2-2-1',
            child: [{
                t: '2-2-1-1'
            }, {
                t: '2-2-1-2'
            }]
        }]
    }]
}]

`

Answer 1

结果：

代码：

<ul>
    <li>
        1
        <ul>
            <li>1-1
                <ul>
                    <li>
                        1-1-1
                    </li>
                </ul>
            </li>
            <li>1-2
                <ul>
                    <li>
                        1-2-1
                        <ul>
                            <li>
                                1-2-1-1
                            </li>
                            <li>
                                1-2-1-2
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2-1
                <ul>
                    <li>
                        2-1-1
                    </li>
                </ul>
            </li>
            <li>2-2</li>
        </ul>
    </li>
</ul>
<script>
let ul = document.getElementsByTagName('ul')[0];
function make_tree(node) {
    if (!node) return [];
    if (node.tagName == 'UL') {
        let treeList = [];
        for (let i = 0; i < node.children.length; i++) {
            treeList.push(make_tree(node.children[i]));
        }
        return treeList;
    }
    else if (node.tagName == 'LI') {
        let value = node.innerHTML.split('<')[0].replace(/\s/g, '');
        let tree = {'t': value, child: make_tree(node.children[0])};
        return tree;
    }
}
console.log(make_tree(ul));
</script>

可以看到这个结果和题主要求的稍有不同，题主的例子，叶子节点直接没有 child 属性了，稍作修改就可以实现。
修改 make_tree 函数：

function make_tree(node) {
    if (!node) return [];
    if (node.tagName == 'UL') {
        let treeList = [];
        for (let i = 0; i < node.children.length; i++) {
            treeList.push(make_tree(node.children[i]));
        }
        return treeList;
    }
    else if (node.tagName == 'LI') {
        let value = node.innerHTML.split('<')[0].replace(/\s/g, '');
        let child = make_tree(node.children[0]);
        let tree = {'t': value};
        if (child.length > 0)
            tree.child = child;
            
        return tree;
    }
}

最终结果：