UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Get Tree from Page

In this example, the Uize.Dom.Tree.getTreeFromPage static method of the Uize.Dom.Tree module is being used to build a tree data object respresenting the structure of the document, by analyzing the occurrence of different CSS classes for section headings at different depths of the document (in this case, the CSS classes level1Header, level2Header, and level3Header). A tree data object like this can be supplied to a tree menu widget, or can otherwise be used to build UI for navigating to different sections of the document (a contents tree, for example). A tree data object can also be generated from nested lists using the Uize.Dom.Tree.getTreeFromList method (see the Get Tree from List example).

Page With Section Headings Generated Tree Data Object
1. Renewable Energy

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

1.1. Solar Power

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

1.2. Wind Power

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

1.3. Biofuels

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2. Fossil Fuels

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.1. Peak Oil

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.2. Types of Fossil Fuel

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.2.1. Oil

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.2.2. Natural Gas

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.3. Climate Change

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW

2.4. Energy Security

WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW