使用 js 处理XML 文档
index.html
==========================================================
<html>
<script language="JavaScript" src="getXML.js"></script>
<script language="JavaScript" type="text/javascript">
//-------开始调用------------------------------------------------------
var DOMRoot = getXML("Login.xml");
//输出目录树结构
switchTree(DOMRoot, 2);
</script>
</html>
getXML.js
==========================================================
function createXMLDom(){
if (window.ActiveXObject)
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
else
if (document.implementation && document.implementation.createDocument)
var xmldoc = document.implementation.createDocument("", "doc", null);
xmldoc.async = false;
//为了和FireFox一至，这里不能改为False;
xmldoc.preserveWhiteSpace = true;
return xmldoc;
}
function createXMLHttp(){
var xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
//加载XML文件。
function getXML(xmlFile){
var xmlDom = createXMLDom();
try {
xmlDom.load(xmlFile);
}
catch (e) {
var xmlHttp = createXMLHttp();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
xmlDom = xmlHttp.responseXML;
}
else {
window.state = "XML文件加载中...";
}
}
xmlHttp.open("GET", xmlFile, false);
xmlHttp.send(null);
}
return xmlDom.documentElement;
}
//取出指定节点的属性。
function getDOMAtt(pNode, pAttribute){
try {
return pNode.attributes.getNamedItem(pAttribute).nodeValue;
}
catch (e) {
//alert("指定节点不存在，或指定属性："+pAttribute+" 不存在!")
return false;
}
}
//获取当前节点的属性列表
function attList(pNode){
if (pNode.nodeType == 4)
return '';
var oAtt, tmpString = "[ ";
try {
for (var i = 0; oAtt = pNode.attributes[i]; i++) {
tmpString += oAtt.nodeName + " = '" + oAtt.nodeValue + "' ";
}
tmpString += " ]"
return tmpString;
}
catch (e) {
return ''
}
}
//获取节点名称
function getNodeName(pNode){
if (pNode.nodeType == 4)
return '';
return pNode.nodeName;
}
//获取节点名称
function getNodeValue(pNode){
try {
return " : " + pNode.firstChild.nodeValue;
}
catch (e) {
return ''
}
}
//＜----------------------------调试功能函数------------------------------>
//输出空格
function nbsp(pNum){
var tmpString = ""
for (var i = 0; i < pNum; i++) {
tmpString += " "//这里是全角的空格
}
return tmpString;
}
//用于高度输出完整的XML树
function switchTree( pNode, pLevel ){
var tNode, i;
for (i = 0; tNode = pNode.childNodes[i]; i++) {
if (tNode.nodeType == 3)
continue;//因为preserveWhiteSpace等于true
document.write(nbsp(pLevel),"<font color='blue'><b>",getNodeName(tNode),"</b></font><font color='red'>",attList(tNode),"</font>",getNodeValue(tNode),"<br />");
switchTree(tNode, pLevel + 1);
}
}
Login.xml
==========================================================
<?xml version="1.0" encoding="utf-8" ?>
<Login>
<Character>
<C Text="热血" Value="0"></C>
<C Text="弱气" Value="1"></C>
<C Text="激情" Value="2"></C>
<C Text="冷静" Value="3"></C>
<C Text="冷酷" Value="4"></C>
</Character>
<Weapon>
<W Text="光束剑" X="XXXX 其他参数" Value="0"></W>
<W Text="光束配刀" Value="1"></W>
</Weapon>
<EconomyProperty>
<P Text="平均型" Value="0"></P>
<P Text="重视攻击" Value="1"></P>
<P Text="重视敏捷" Value="2"></P>
<P Text="重视防御" Value="3"></P>
<P Text="重视命中" Value="4"></P>
</EconomyProperty>
</Login>
==========================================================
<html>
<script language="JavaScript" src="getXML.js"></script>
<script language="JavaScript" type="text/javascript">
//-------开始调用------------------------------------------------------
var DOMRoot = getXML("Login.xml");
//输出目录树结构
switchTree(DOMRoot, 2);
</script>
</html>
getXML.js
==========================================================
function createXMLDom(){
if (window.ActiveXObject)
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
else
if (document.implementation && document.implementation.createDocument)
var xmldoc = document.implementation.createDocument("", "doc", null);
xmldoc.async = false;
//为了和FireFox一至，这里不能改为False;
xmldoc.preserveWhiteSpace = true;
return xmldoc;
}
function createXMLHttp(){
var xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
//加载XML文件。
function getXML(xmlFile){
var xmlDom = createXMLDom();
try {
xmlDom.load(xmlFile);
}
catch (e) {
var xmlHttp = createXMLHttp();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
xmlDom = xmlHttp.responseXML;
}
else {
window.state = "XML文件加载中...";
}
}
xmlHttp.open("GET", xmlFile, false);
xmlHttp.send(null);
}
return xmlDom.documentElement;
}
//取出指定节点的属性。
function getDOMAtt(pNode, pAttribute){
try {
return pNode.attributes.getNamedItem(pAttribute).nodeValue;
}
catch (e) {
//alert("指定节点不存在，或指定属性："+pAttribute+" 不存在!")
return false;
}
}
//获取当前节点的属性列表
function attList(pNode){
if (pNode.nodeType == 4)
return '';
var oAtt, tmpString = "[ ";
try {
for (var i = 0; oAtt = pNode.attributes[i]; i++) {
tmpString += oAtt.nodeName + " = '" + oAtt.nodeValue + "' ";
}
tmpString += " ]"
return tmpString;
}
catch (e) {
return ''
}
}
//获取节点名称
function getNodeName(pNode){
if (pNode.nodeType == 4)
return '';
return pNode.nodeName;
}
//获取节点名称
function getNodeValue(pNode){
try {
return " : " + pNode.firstChild.nodeValue;
}
catch (e) {
return ''
}
}
//＜----------------------------调试功能函数------------------------------>
//输出空格
function nbsp(pNum){
var tmpString = ""
for (var i = 0; i < pNum; i++) {
tmpString += " "//这里是全角的空格
}
return tmpString;
}
//用于高度输出完整的XML树
function switchTree( pNode, pLevel ){
var tNode, i;
for (i = 0; tNode = pNode.childNodes[i]; i++) {
if (tNode.nodeType == 3)
continue;//因为preserveWhiteSpace等于true
document.write(nbsp(pLevel),"<font color='blue'><b>",getNodeName(tNode),"</b></font><font color='red'>",attList(tNode),"</font>",getNodeValue(tNode),"<br />");
switchTree(tNode, pLevel + 1);
}
}
Login.xml
==========================================================
<?xml version="1.0" encoding="utf-8" ?>
<Login>
<Character>
<C Text="热血" Value="0"></C>
<C Text="弱气" Value="1"></C>
<C Text="激情" Value="2"></C>
<C Text="冷静" Value="3"></C>
<C Text="冷酷" Value="4"></C>
</Character>
<Weapon>
<W Text="光束剑" X="XXXX 其他参数" Value="0"></W>
<W Text="光束配刀" Value="1"></W>
</Weapon>
<EconomyProperty>
<P Text="平均型" Value="0"></P>
<P Text="重视攻击" Value="1"></P>
<P Text="重视敏捷" Value="2"></P>
<P Text="重视防御" Value="3"></P>
<P Text="重视命中" Value="4"></P>
</EconomyProperty>
</Login>
