SOURCE CODE: Get Tree from Page
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Get Tree from Page | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Dom.Tree"/>
  <meta name="description" content="See how a tree data object can be created by analyzing the occurrence of different CSS classes for section headings at different depths of a document."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    /*** styling of panes ***/
      .pane {
        height:345px;
      }
      .documentPane {
        width:294px;
        float:left;
        overflow:auto;
        border:1px solid #666;
        padding:2px;

        /*** gradient ***/
          background: #ffffff; /* Old browsers */
          /* IE9 SVG, needs conditional override of 'filter' to 'none' */
          background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
          background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* IE10+ */
          background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
      }
      .jsonPane {
        font-size:11px;
        width:430px;
        margin:0;
      }

    /*** document level classes ***/
      .level1Header {
        font-size:17px;
        font-weight:bold;
        padding-left:0px;
      }
      .level1Body {
        font-size:12px;
        padding-left:10px;
      }
      .level2Header {
        font-size:15px;
        font-weight:bold;
        padding-left:30px;
      }
      .level2Body {
        font-size:12px;
        padding-left:40px;
      }
      .level3Header {
        font-size:12px;
        font-weight:bold;
        text-indent:12px;
        padding-left:60px;
      }
      .level3Body {
        font-size:12px;
        padding-left:70px;
      }

    /*** overrides for headings ***/
      td.heading {
        border-bottom:none;
        padding:2px 0;
      }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Get Tree from Page
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/get-tree-from-page.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the <code>Uize.Dom.Tree.getTreeFromPage</code> static method of the <a href="reference/Uize.Dom.Tree.html"><code>Uize.Dom.Tree</code></a> 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 <code>level1Header</code>, <code>level2Header</code>, and <code>level3Header</code>). 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 <code>Uize.Dom.Tree.getTreeFromList</code> method (see the <a href="get-tree-from-list.html">Get Tree from List</a> example).</p>
  </div>

  <table border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
    <tr>
      <td class="heading">Page With Section Headings</td>
      <td width="5"></td>
      <td class="heading">Generated Tree Data Object</td>
    </tr>
    <tr>
      <td>
        <div class="pane documentPane">
          <div id="sect1" class="level1Header" title="All about renewable energy technologies">
            1. Renewable Energy
          </div>
            <p class="level1Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect1_1" class="level2Header" title="An introduction to solar power">
              1.1. Solar Power
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect1_2" class="level2Header" title="An introduction to wind power">
              1.2. Wind Power
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect1_3" class="level2Header" title="An introduction to biofuels">
              1.3. Biofuels
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
          <div id="sect2" class="level1Header" title="All about fossil fuel technologies">
            2. Fossil Fuels
          </div>
            <p class="level1Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect2_1" class="level2Header" title="An introduction to the concept of peak oil">
              2.1. Peak Oil
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect2_2" class="level2Header" title="A look at different types of fossil fuels">
              2.2. Types of Fossil Fuel
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
              <div id="sect2_2_1" class="level3Header" title="A look at the history and future of oil">
                2.2.1. Oil
              </div>
                <p class="level3Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
              <div id="sect2_2_2" class="level3Header" title="An introduction to natural gas">
                2.2.2. Natural Gas
              </div>
                <p class="level3Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect2_3" class="level2Header" title="Climate change and fossil fuels">
              2.3. Climate Change
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
            <div id="sect2_4" class="level2Header" title="Fossil fuels and energy security">
              2.4. Energy Security
            </div>
              <p class="level2Body">WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW WWW</p>
        </div>
      </td>
      <td></td>
      <td>
        <textarea id="page-treeAsJson" class="pane jsonPane" wrap="off"></textarea>
      </td>
    </tr>
  </table>

</div>

<!-- JavaScript code to wire up the page -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Dom.Tree',
    'Uize.Json'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** get tree from list and serialize as JSON ***/
      page.setNodeValue (
        'treeAsJson',
        Uize.Json.to (
          Uize.Dom.Tree.getTreeFromPage (['level1Header','level2Header','level3Header'],Infinity),
          {indentChars:'   '}
        )
      );
  }
);

</script>

</body>
</html>