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.