zTree v3.5 Css分解与dom结构说明

zTree是一款非常流行的树形控件，通过CSS样式控制树形结构的显示，但是有时候样式比较复杂，不容易理解。因此了解zTree的CSS分解和DOM结构对于深入学习和应用zTree非常有帮助。

1. CSS分解

1.1 基础CSS样式

zTree中的基本样式可以通过以下css控制：

.ztree {}

.ztree li {}

.ztree li ul {}

.ztree li li {}

.ztree li a {}

.ztree类包含整个树形结构的样式。.ztree li类用于控制树形节点的样式，.ztree li ul和.ztree li li类用于控制子节点和孙子节点的样式，.ztree li a用于在节点中显示文本。

1.2 样式选项

zTree插件有很多可用的样式选项，比如节点图标、checkbox、节点线等。这里以节点图标为例，讲解它的CSS样式控制：

.ztree li span.button {}

.ztree li span.button.ico_open {}

.ztree li span.button.ico_close {}

.ztree li span.button类用于控制节点图标的样式，.ztree li span.button.ico_open类和.ztree li span.button.ico_close类用于控制节点的展开和收起状态下图标的样式。

通过以上CSS样式，可以很好地控制zTree的节点图标的样式，包括收起节点的图标、展开节点的图标。

2. DOM结构说明

了解zTree插件的DOM结构对于在使用插件时调试CSS和JavaScript代码非常有帮助。以下是zTree插件的基本DOM结构：

<ul id="treeDemo" class="ztree"></ul>

ul标签的id为"treeDemo"，同时具有.ztree的类，这个ul标签是整个树形结构的根节点。通过JavaScript中zTree对象的属性和方法可以动态地向这个节点中添加子节点，并控制树形结构。

每个节点的DOM结构大致如下：

<li id="node_1" treeNodeId="1" class="level0  treeNodeClosed">
  <a href="#" id="node_1_a" title="节点1">
    <span id="node_1_span" title="节点1" class="button ico_close"></span> 节点1
  </a>
  <ul id="node_1_ul" class="level1"></ul>
</li>

其中li标签表示节点，同样具有节点的id，同时也有.treeNodeClosed等一系列的类，这些类用于动态地控制节点的展开和收起状态。a标签用于添加节点的文本和其他属性，比如title。span标签用于添加节点的图标等样式。

通过对zTree插件CSS分解与DOM结构说明的理解，我们可以更好地应用这个插件，同时可以在更深层次上学习CSS和JavaScript。