Question

我最近没有做任何网络开发。想知道是否有一种简单的方法来加载层次结构树的数据表示，例如

node             parent
---------------------------------
root             
Level1.Node1     root
Level1.Node2     root
Level1.Node3     root
Level2.Node1     Level1.Node1
Level2.Node2     Level1.Node2
Level2.Node3     Level1.Node2

让它像

一样呈现

root
  --------Level1.Node1
               --------------Level2.Node1 
  --------Level1.Node2
               --------------Level2.Node2
               --------------Level2.Node3

没有使用花哨的表格？

Answer 1

使用样式化和嵌套的无序列表。

<ul>
    <li>Level 1
        <ul>
            <li>Level 2</li>
         </ul>
    </li>
</ul>

Answer 2

实际上你只想继续检查父母的孩子。这不是HTML5 / CSS的东西，而是检查DOM（节点）根的JavaScript。

使用WebKit / Firebug工具转储HTML DOM对象并查看其属性。您可以看到它们的属性和方法是什么，并使用它们迭代它们，直到您到达每个子标记的底部。

console.log(document);
console.log(document.head);

这些只是返回HTML块。

console.log(document.body);

这将返回实际的DOM对象。您可以在检查器中看到实际上要回收大量信息进行解析。

检查[children]和[childNodes]。那就是你要迭代DOM结构的地方。 [nodeName]和[nodeType]可帮助您识别属性。

打印出来，您可以使用占位符var offset = ' ';并重新启用它们或使用CSS来使用数学计算的左边距渲染<div>标记。

如何在HTML5 / CSS中呈现层次结构树？

2 个答案: