想要?jiǎng)討B(tài)的根據(jù)xml文件來(lái)創(chuàng)建一棵Tree,采用dojo的Tree這個(gè)widget來(lái)作為載體實(shí)現(xiàn)，本以為很簡(jiǎn)單的工作卻沒(méi)有想到的麻煩。
1.使用js來(lái)load xml文件

function loadXML(xmlFile)
{
    var xmlDoc;
    if(window.ActiveXObject)
    {
        xmlDoc    = new ActiveXObject('Microsoft.XMLDOM');
        xmlDoc.async    = false;    //這里千萬(wàn)需要注意，非同步的選項(xiàng)，默認(rèn)為true，后面Note 1會(huì)有解釋
        xmlDoc.load(xmlFile);
    }
    else if (document.implementation&&document.implementation.createDocument)
    {
        xmlDoc  = document.implementation.createDocument('', '', null);
        xmlDoc.async=false;
        xmlDoc.load(xmlFile);
    }
    else
    {
        return null;
    }
   
    return xmlDoc;
}

function checkXMLDocObj(xmlFile)
{
    var xmlDoc    = loadXML(xmlFile);
    if(xmlDoc==null)
    {
        alert('Explore do not support xml file load');
    }
    return xmlDoc;
   
}
 
function parseXML(xml) {
 var xmlDoc    = checkXMLDocObj("/Tree/data.xml"); // 這里是文件，默認(rèn)根節(jié)點(diǎn)叫做data
 var data = xmlDoc.getElementsByTagName("data");
createTreeFromXML(data.item(0));   //這里是一個(gè)很tricky的方式取到xml文件的根節(jié)點(diǎn)
var s = dojo.widget.byId("dataTree").selector;    //發(fā)現(xiàn)動(dòng)態(tài)的給dojo的tree node加selector非常困難，但突然發(fā)現(xiàn)dojo tree默認(rèn)給每一個(gè)節(jié)點(diǎn)都有selector，所以直接取來(lái)用
dojo.event.connect(s, 'select', 'treeNodeSelected');    //就是一個(gè)字了，爽
}

function createTreeFromXML(root) {
  var tree = dojo.widget.byId("dataTree");
  if(tree == null)
   alert("null");              
  else
   tree.destroy();
  tree = dojo.widget.createWidget("Tree", {id: "dataTree", toggle: "wipe", expandLevel: 3});          //創(chuàng)建tree
  dojo.byId("tree").appendChild(tree.domNode);                                                                          /放置tree
  
  var rootNode = dojo.widget.createWidget("TreeNode", {title: root.localName});
  tree.addChild(rootNode);
  appendChild(root,rootNode);          //開(kāi)始循環(huán)遞歸的創(chuàng)建tree的子節(jié)點(diǎn)
 }
 
 function appendChild(father,fatherTreeNode) {
  var sub;
  var subTreeNode;
  if(window.ActiveXObject) {
   for(var i = 1; i < father.childNodes.length; i=i++) {            //這里有一個(gè)很惡心的事情，就是ie 和firefox了，一個(gè)父節(jié)點(diǎn)，在ie中g(shù)et the child nodes,works fine
    sub = father.childNodes[i];
    var title = sub.localName;             
    subTreeNode = dojo.widget.createWidget("TreeNode",{title: title});             
    fatherTreeNode.addChild(subTreeNode);
    appendChild(sub,subTreeNode,objectID);
   }
  }
  else {
   for(var i = 1,j=1; i < father.childNodes.length; i=i+2,j++) {    // 在firefox中獲取，要間隔為2，中間總是多出一個(gè)濫竽充數(shù)的家伙
    sub = father.childNodes[i];
    var title = sub.localName;                                                     //使用localName屬性
    subTreeNode = dojo.widget.createWidget("TreeNode",{title: title});    //生成新的子節(jié)點(diǎn)
    fatherTreeNode.addChild(subTreeNode);                                      
    appendChild(sub,subTreeNode);                                                        //遞歸
   }
  }
  return;
 }

Note:
1. 在load xml文件的時(shí)候非同步參數(shù)一定要設(shè)置為false,否則很可能會(huì)發(fā)生在xml文件還沒(méi)有l(wèi)oad完之后就調(diào)用處理從而發(fā)生找不到節(jié)點(diǎn)的error
2. ie和firefox的dom child node 問(wèn)題也值得注意，以后會(huì)再研究一下問(wèn)什么會(huì)發(fā)生這種問(wèn)題。