最近研究起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。。。