Showing HTML DOM Tree as Nodes and Links with TreeLayout
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.
For more uses of the TreeLayout see the DOM Tree and Visual Tree samples.
GoJS Features in this sample
Tree Layout
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 learn Trees page. More information can be found in the GoJS learn pages.
Buttons
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.build. 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 learn pages.