Javascript 递归打印Document层次关系

最新推荐文章于 2023-04-04 15:37:28 发布

原创最新推荐文章于 2023-04-04 15:37:28 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用JavaScript递归遍历DOM树的方法，通过层级显示网页中的各个元素及其属性，帮助开发者更好地理解和调试页面布局。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>递归显示节点层次关系</title>

        function getSpace(level) {
            var s = "";
            for (var i = 0; i < level; i++) {
                s+="!----"
            }
            return s;
        }

        function PrintInfo(node, level) {
            ResultStr += getSpace(level) + "Name:" + node.nodeName +
                                "...Type:" + node.nodeType + "...Value:" + node.nodeValue + "<br />";
        }

        function getDocAllInfo() {
            ResultStr = "";
            ListNode(document, 0);
            document.write(ResultStr);
        }
    </script>

</head>
<body>
<input type="button" value="测试" onclick="getDocAllInfo()" />

<div id="divDemo">div内容</div>

<input type="text" />
<span>我是SPAN</span>

</body>
</html>