时间戳

首页 > 解决方案 > 有没有办法映射所有 HTML 元素和子元素？

javascript - 有没有办法映射所有 HTML 元素和子元素？

问题描述

我有以下 html 格式，并希望它遍历所有孩子的孩子等。

<body>
    <header>
        <div>
            <ul>
                <li>
                    <span></span>
                    <a>
                        <span></span>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <main>
        <div></div>
        <div></div>
    </main>
    <footer>
        <ul>
            <li>
                <a></a>
            </li>
        </ul>
    </footer>
</body>

输出应该在我可以以这种格式显示的数组中。

header
    div
        ul
            li
                span
                a
                    span
main
    div
    div
footer
    ul
        li
            a

有什么建议么？

谢谢！

标签： javascriptjquery

解决方案

下面是循环遍历 DOM 树的递归方法。

function loopDOMTree(parent) {
    var treeString = "";
    function loopTree(parent2, tabs) {
        treeString += tabs + parent2.tagName + "\n";
        for (let tag of parent2.children) {
            if (tag.childElementCount == 0) {
                treeString += tabs + '\t' + tag.tagName + "\n";
            } else {
                loopTree(tag, tabs + '\t')
            }
        }
    }
    loopTree(parent, "");
    return treeString;
}
console.log(loopDOMTree(document.body));
<body>
    <header>
        <div>
            <ul>
                <li>
                    <span></span>
                    <a>
                        <span></span>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <main>
        <div></div>
        <div></div>
    </main>
    <footer>
        <ul>
            <li>
                <a></a>
            </li>
        </ul>
    </footer>
</body>

推荐阅读