js调用XML数据生成DIV

最近研究起XML和XHTML之类的东西。今天自己做了个小例子。
源代码下载(090717,仅支持IE)

源代码下载(090719整理,支持IE,FF)
执行创建DIV的代码：

<script type="text/javascript">
var DIV = {
    $C:function(id, data, cls){
        var newDiv = document.createElement("DIV");
        if(id && id != "")
            newDiv.id = id;
        if(data && data != ""){
            newDiv = document.createElement("SPAN");
            newDiv.innerText = data;
        }
        if(cls && cls != "")
            newDiv.className = cls;
        return newDiv;
    },
    $J:function(divp, divc){
        if(divp && divc)
            divp.appendChild(divc);
        return divp;
    },
    $A:function(a){
        var nList = new Array();
        for(var i = 1; i < a.length; i++){
            nList.push(a[i]);
        }
        return nList;
    },
    $N:function(xmlDoc, tag, ind){
        if(tag && xmlDoc.getElementsByTagName(tag)[0].attributes.length > 0 && xmlDoc.getElementsByTagName(tag)[0].attributes[0].nodeName == "id")
            return xmlDoc.getElementsByTagName(tag)[0].attributes[0].text;
        else if(ind && xmlDoc.attributes.length > 0 && xmlDoc.attributes[0].nodeName == "id")
            return xmlDoc.attributes[0].text + "_" + ind;
        else if(xmlDoc.attributes.length > 0 && xmlDoc.attributes[0].nodeName == "id")
            return xmlDoc.attributes[0].text;
        return null;
    },
    O:function(XmlDoc, Tags, Cls){
        var id;
        if(XmlDoc.attributes.length > 0 && XmlDoc.attributes[0].nodeName == "id")
            id = XmlDoc.attributes[0].text;
        if(Tags.length > 0){
            var newDiv;
            if(typeof(Tags[0]) == "string"){
                newDiv = this.$C(id, null, Cls);
                for(var i = 0; i < XmlDoc.getElementsByTagName(Tags[0]).length; i++)
                    newDiv = this.$J(newDiv ,this.O(XmlDoc.getElementsByTagName(Tags[0])[i], this.$A(Tags)));
            }
            else{
                newDiv = this.P(XmlDoc, Tags[0]);
            }
            return newDiv;
        }
        else
            return this.$C(id, XmlDoc.getElementsByTagName(Tags[0])[0].text);
    },
    P:function(XmlDoc, Tags){
        var id = this.$N(XmlDoc);
        var newDiv = this.$C(id);
        for(var i = 0; i < Tags.length; i++){
            id = this.$N(XmlDoc, Tags[i], i);
            newDiv = this.$J(newDiv, this.$C(id, XmlDoc.getElementsByTagName(Tags[i])[0].text));
        }
        return newDiv;
    }
}
</script>

 

读取XML和调用上面方法的方法：

<script type="text/javascript">

var fileRoute="XMLFile2.xml";
if(window.location.search.substring(1).split('=')[1] == "2")
    fileRoute = "XMLFile2.xml";
else
    fileRoute = "XMLFile.xml";
    
var xmlDoc;
function getXMLData(fileNewRoute){
    if(fileNewRoute && fileNewRoute != "")
        fileRoute = fileNewRoute;
    if (window.ActiveXObject){
        xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
        xmlDoc.async=false;
        xmlDoc.load(fileRoute);
        browse="ie";
    }
    else if (document.implementation && document.implementation.createDocument){
        xmlDoc=document.implementation.createDocument('', '', null);
        xmlDoc.load(fileRoute);
        browse="ff";
    }
    else{
        alert( '未做与该浏览器的兼容！');
    }
}

getXMLData("XMLFile2.xml");
var obj = DIV.O(xmlDoc.getElementsByTagName("ROOT")[0], ["PARENT", ["CHILD1", "CHILD2", "CHILD3", "CHILD4"]], "cba");
document.getElementById("body").appendChild(obj);
function toChangeXML()
{
    document.getElementById("body").removeChild(obj);
    if(fileRoute == "XMLFile.xml")
        getXMLData("XMLFile2.xml");
    else
        getXMLData("XMLFile.xml");
    obj = DIV.O(xmlDoc.getElementsByTagName("ROOT")[0], ["PARENT", ["CHILD1", "CHILD2", "CHILD3", "CHILD4"]], "cba");
    document.getElementById("body").appendChild(obj);
}
</script>

 

XMLFIle.xml:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="temp.xsl"?>
<ROOT>
    <PARENT>
        <CHILD1>1</CHILD1>
        <CHILD2>2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
    <PARENT>
        <CHILD1 value="1" text="一">1</CHILD1>
        <CHILD2 value="2" text="二">2</CHILD2>
        <CHILD3 value="3" text="三">3</CHILD3>
        <CHILD4 value="4" text="四">4</CHILD4>
        <CHILD5 value="5" text="五">5</CHILD5>
        <CHILD6 value="6" text="六">6</CHILD6>
        <CHILD7 value="7" text="七">7</CHILD7>
        <CHILD8 value="8" text="八">8</CHILD8>
        <CHILD9 value="9" text="九">9</CHILD9>
        <CHILD10 value="10" text="十">10</CHILD10>
    </PARENT>
</ROOT>

 

XMLFile2.xml:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="temp2.xsl"?>
<ROOT id="ROOT_0">
    <PARENT id="PARENT_0">
        <CHILD1 id="P0_CHILD1">A1</CHILD1>
        <CHILD2 id="P0_CHILD2">B1</CHILD2>
        <CHILD3>C</CHILD3>
        <CHILD4>D</CHILD4>
        <CHILD5>E</CHILD5>
        <CHILD6>F</CHILD6>
        <CHILD7>G</CHILD7>
        <CHILD8>H</CHILD8>
        <CHILD9>I</CHILD9>
        <CHILD10>J</CHILD10>
    </PARENT>
    <PARENT id="PARENT_1">
        <CHILD1 id="P1_CHILD1">A2</CHILD1>
        <CHILD2 id="P1_CHILD2">B2</CHILD2>
        <CHILD3>C</CHILD3>
        <CHILD4>D</CHILD4>
        <CHILD5>E</CHILD5>
        <CHILD6>F</CHILD6>
        <CHILD7>G</CHILD7>
        <CHILD8>H</CHILD8>
        <CHILD9>I</CHILD9>
        <CHILD10>J</CHILD10>
    </PARENT>
</ROOT>

 

下面是页面的内容和样式:

<style type="text/css">
    .nba div {background:Red;}
    .cba div {background:#999;padding:10px; }
</style>
省略
<body id="body">
    <input id="Button1" type="button" value="Change XML !" onclick="toChangeXML();" />
</body>

 

目前还不支持FF。但IE7下是没有问题的。等有时间再去完善下。。。

19日已更新，可支持FF。。。