自学XML DOM的几个例子

  XML DOM定义了如何获取、修改、添加和删除XML文件中结点的接口,极大方便了开发者对XML文件的使用。XML DOM教程和手册请转:http://www.w3school.com.cn/xmldom/dom_cdatasection.asp。

例子:利用XML DOM将XML中目标内容提取出来现在在html文件指定元素当中。

ex1.html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>XML DOM Basis-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="XML DOM Basis-1" />
    <meta name="revised" content="Wayne Ng, 2016/1/28" />
</head>
<body onload = "loadFile('ex1.xml')">
    <div id = "container"></div>
    <script type="text/javascript" src="func1.js"></script>
</body>

ex1.xml文件:

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE game SYSTEM "game.dtd">
<!--
    Date:2016/1/26
    Writer:Wayne Ng
    Theme:MapleStory hero briefInstruction
-->
<game>
    <warrior>
        <hero>
            <name>英雄</name>
            <weapons>剑、斧、钝器</weapons>
            <skill>终极打击</skill>
        </hero>
        <hero>
            <name>圣骑士</name>
            <weapons>剑、钝器</weapons>
            <skill>神圣冲击</skill>
        </hero>    
        <hero>
            <name>黑骑士</name>
            <weapons>长枪、矛</weapons>
            <skill>黑暗穿刺</skill>
        </hero>    
    </warrior>
    <magician>
        <hero>
            <name>主教</name>
            <weapons>长杖、短仗</weapons>
            <skill>圣光普照</skill>
        </hero>
        <hero>
            <name>火毒法师</name>
            <weapons>长杖、短仗</weapons>
            <skill>末日火焰</skill>
        </hero>    
        <hero>
            <name>冰雷法师</name>
            <weapons>长杖、短仗</weapons>
            <skill>冰咆哮</skill>
        </hero>    
    </magician>
    <archer>
        <hero>
            <name>神射手</name>
            <weapons></weapons>
            <skill>暴风箭雨</skill>
        </hero>
        <hero>
            <name>箭神</name>
            <weapons></weapons>
            <skill>终极扫射</skill>
        </hero>    
    </archer>
    <ranger>
        <hero>
            <name>侠盗</name>
            <weapons>短剑、短刀</weapons>
            <skill>暗杀</skill>
        </hero>
        <hero>
            <name>隐士</name>
            <weapons>拳套</weapons>
            <skill>四连镖</skill>
        </hero>    
        <hero>
            <name>暗影双刀</name>
            <weapons>短剑、短刀</weapons>
            <skill>终极斩</skill>
        </hero>        
    </ranger>
</game>

func1.js文件:

//载入XML文档
function loadXMLDOC(url){
    var xmlDoc;
    try{
        //for IE explorer
        xmlDoc = new ActiveXobject("Microsoft.XMLDOM");
    }
    catch(e){
        //for Firefox, Mozilla, Opera, etc.
        try{
            xmlDoc = document.implementation.createDocument("", "", null);
        }
        catch(e){alert(e.message);}
    }
    try{
        xmlDoc.async = false;
        xmlDoc.load(url);
        return xmlDoc;
    }
    catch(e){alert(e.message);}
}

//将XML文档信息载入HTML文件
function loadFile(url){
    var xmlDoc = loadXMLDOC(url);
    var name = xmlDoc.getElementsByTagName("name");
    var weapons = xmlDoc.getElementsByTagName("weapons");
    var skill = xmlDoc.getElementsByTagName("skill");
    var txt = "<h1>冒险岛职业简介</h1><table border = '1'><tr>\
               <th>名称</th>\
               <th>武器</th>\
               <th>技能</th></tr>";
    for(var i = 0; i < name.length; ++i){
        txt += "<tr>";
        txt += "<td style = 'text-align:center; width:150px'>" + name[i].childNodes[0].nodeValue + "</td>";
        txt += "<td style = 'text-align:center; width:150px'>" + weapons[i].childNodes[0].nodeValue + "</td>";
        txt += "<td style = 'text-align:center; width:150px'>" + skill[i].childNodes[0].nodeValue + "</td>";
        txt += "</tr>";
    }
    txt += "</table>";
    document.getElementById("container").innerHTML = txt;
    
}

显示效果:

      2016/1/28  By野马菌

你可能感兴趣的:(自学XML DOM的几个例子)