标签：
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野马菌
标签：
原文地址：http://www.cnblogs.com/yemajun/p/5166978.html
