This sample shows the DOM (Document Object Model) of this webpage displayed as a tree. Each Node in the Diagram shows information about the corresponding HTML element in the DOM.
When a node is selected, the background color of the corresponding HTML Element changes to lightblue. Below the diagram are some more HTML elements to illustrate the effect. This sample also makes use of the TreeExpanderButton, which allows for parent nodes to expand and collapse their child nodes. Buttons are defined in Buttons.js.
Elements with an id attribute are noted in parenthesis.
| Table header | Table header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
My grocery list
For more uses of the TreeLayout see the DOM Tree and Visual Tree samples.
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS Intro.