- OrgChart (Static)
- OrgChart Editor
- Family Tree
- Genogram
- Double Tree
- Mind Map
- Decision Tree
- IVR Tree
- Incremental Tree
- Parse Tree
- Tree View
- Tournament
- Local View
- Flowchart
- Block Editor
- Page Flow
- Process Flow
- System Dynamics
- State Chart
- Kanban Board
- Sequential Function
- Grafcet Diagrams
- Sequence Diagram
- Logic Circuit
- Record Mapper
- Data Flow
- Dynamic Ports
- Planogram
- Seating Chart
- Regrouping
- Pipes
- Draggable Link
- Links to Links
- Beat Paths
- Concept Map
- Euler Diagram
- Data Visualization
- Entity Relationship
- Friend Wheel
- Recentering Radial
- Radial Partition
- Distances and Paths
- Sankey
- PERT
- Gantt
- Shop Floor Monitor
- Kitten Monitor
- Grouping
- Layer Bands
- Swim Lanes
- UML Class
- Minimal
- Basic (editing)
- Class Hierarchy
- DOM Tree
- Visual Tree
- Shape Figures
- SVG Icons
- Arrowheads
- Navigation
- Update Demo
- Content Alignment
- HTML Interaction
- Context Menu
- Canvases
- Comments
- Grid Layout
- Tree Layout
- Force Directed
- Layered Digraph
- Circular Layout
- Interactive Force
- GoJS Extensions
- GoJS Projects
- Complete List
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
- Coffee
- Milk
- Bread
For more uses of the TreeLayout see the DOM Tree and Visual Tree samples.