Js處理XML

想要動態根據xml檔案來建立一棵Tree,採用dojo的Tree這個widget來作為載體實現，本以為很簡單的工作卻沒有想到的麻煩。
1.使用js來load xml檔案

function loadXML(xmlFile)
{
    var xmlDoc;
    if(window.ActiveXObject)
    {
        xmlDoc    = new ActiveXObject('Microsoft.XMLDOM');
        xmlDoc.async    = false;    //這裡千萬需要注意，非同步的選項，預設為true，後面Note 1會有解釋
        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"); // 這裡是檔案，預設根節點叫做data
 var data = xmlDoc.getElementsByTagName("data");
createTreeFromXML(data.item(0));   //這裡是一個很tricky的方式取到xml檔案的根節點
var s = dojo.widget.byId("dataTree").selector;    //發現動態給dojo的tree node加selector非常困難，但突然發現dojo tree預設給每一個節點都有selector，所以直接取來用
dojo.event.connect(s, 'select', 'treeNodeSelected');    //就是一個字了，爽
}

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});          //建立tree
  dojo.byId("tree").appendChild(tree.domNode);                                                                          /放置tree
  
  var rootNode = dojo.widget.createWidget("TreeNode", {title: root.localName});
  tree.addChild(rootNode);
  appendChild(root,rootNode);          //開始迴圈遞迴的建立tree的子節點
 }
 
 function appendChild(father,fatherTreeNode) {
  var sub;
  var subTreeNode;
  if(window.ActiveXObject) {
   for(var i = 1; i < father.childNodes.length; i=i++) {            //這裡有一個很噁心的事情，就是ie 和firefox了，一個父節點，在ie中get 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，中間總是多出一個濫竽充數的傢伙
    sub = father.childNodes[i];
    var title = sub.localName;                                                     //使用localName屬性
    subTreeNode = dojo.widget.createWidget("TreeNode",{title: title});    //產生新的子節點
    fatherTreeNode.addChild(subTreeNode);                                      
    appendChild(sub,subTreeNode);                                                        //遞迴
   }
  }
  return;
 }

Note:
1. 在load xml檔案的時候非同步參數一定要設定為false,否則很可能會發生在xml檔案還沒有load完之後就調用處理從而發生找不到節點的error
2. ie和firefox的dom child node 問題也值得注意，以後會再研究一下問什麼會發生這種問題。