The CBE Object Tree

All CrossBrowserElement objects are connected into a tree structure using property names from the DOM2 Node interface. This tree structure models the parent/child (nesting) relationships among the CrossBrowserElement objects.

Read more about the CBE object model

The following shows how to display the tree structure. They both utilize cbeTraverseTree().

Example 1

var sTree;

function printTree1() {
  sTree = "";
  cbeTraverseTree('preorder', window.cbe, printTreeVF1);
  cbeGetElementById('f1').t1.value = sTree;
}

function printTreeVF1(node, level, branch) {
  for (var i=0; i < level*2; ++i) sTree += '.';
  sTree += node.id + '\n';
  return true;
}

Example 2 is the technique used by the Object Viewer page.

var sTree;

function printTree2() {
  sTree = "";
  cbeTraverseTree('preorder', window.cbe, printTreeVF2);
  cbeGetElementById('f1').t1.value = sTree;
}

var levelFlag = new Array();

function printTreeVF2(node, level, branch) {
  levelFlag[level] = node.nextSibling ? true : false;
  for (var i=0; i < level-1; ++i) {
    if (levelFlag[i+1]) sTree += '| ';
    else sTree += '  ';
  }  
  if (level) sTree += "|_";
  sTree += node.id + "\n";
  return true;
}