XML---JS基本操作

最近用XML比较多,写点基本操作的总结,积累下
JS读取XML文件内容
很简单的一个页面,点击按钮时读取XML内容显示在DIV中

<html>
<head>
<title>解析XML</title>
</head>
<body>
<div align="center">
<input type="button" onclick="javascript:showListByXML()" value="解析XML" />
</div>
<div id="div1" align="center" style="position:absolute; border-width:1; border-style:outset;
padding:1; width:262; height:25; left: 500; top: 150; visibility: hidden; background-color:#FFFFFF"></div>
</body>
</html>

JS代码

<script LANGUAGE="JavaScript">
/**
*学生类实体
*/
function student(){
var num="";
var name="";
var age="";
var sex="";
}
/**
*加载XML文件
*/
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("xmlForYaWu.xml");

/**
*得到根节点
*/
var root = xmlDoc.getElementsByTagName("Students")[0];

/**
*得到所有子节点
*/
var Students = xmlDoc.getElementsByTagName("Students")[0].getElementsByTagName("Student");

/**
*赋值为一个子节点
*/

var xmlStudent;

/**
*赋值为一个学生类实体
*/

var jsStudent;

/**
*存储学生类实体的数组
*/
var StudentList = new Array(Students.length);

/**
*将XML中的节点、属性转化为JS学生类实体的属性,并存储到数组中
*/
for(var i = 0; i < Students.length; i++){
xmlStudent = Students[i];
jsStudent = new student();

jsStudent.num = xmlStudent.getAttribute("num");
jsStudent.name = xmlStudent.getAttribute("name");
jsStudent.age = xmlStudent.getAttribute("age");
jsStudent.sex = xmlStudent.getAttribute("sex");

StudentList[i] = jsStudent;
}

/**
*控制显示的DIV
*/
var div = document.getElementById("div1");

/**
*显示DIV
*/
function showDIV(){
div.style.visibility = "visible";
}

/**
*隐藏DIV
*/
function closeDIV(){
div.style.visibility = "hidden";
}

/**
*从存储着学生类实体的数组中遍历,写到table中格式化输出
*/
function showListByXML(){
var table = "<table border=0 width='100%' bgcolor='#ddffFF' style='{border-color: #3388cc; border-style: solid; border-width: 1px;}'>"
+"<tr align='center'>"
+"<td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td>"
+"</tr>";
for(var i = 0; i < StudentList.length; i++){
jsStudent = StudentList[i];
if(jsStudent!=null){
table += "<tr align='center'><td>"+jsStudent.num+"</td><td>"+jsStudent.name+"</td><td>"+jsStudent.age+"</td><td>"+jsStudent.sex+"</td><td><a href=javascript:editEntity("+jsStudent.num+")>编辑</a>&nbsp&nbsp<a href=javascript:deleEntity("+jsStudent.num+")>删除</a></td></tr>";
}
}
table += "<tr><td colspan=5><a href=javascript:addEntity()>添加</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=javascript:closeDIV()>关闭</a></td></tr></table>";

div.innerHTML = table;
showDIV();
}

/**
*根据学生编号得到要编辑的学生,
*如果编号没有在数组中遍历出的学生实体中找到,
*就创建一个新的学生实体
*/
function editEntity(num){
closeDIV();
var table = "<table border=0 width='100%' bgcolor='#ddffFF' style='{border-color: #3388cc; border-style: solid; border-width: 1px;}'>";
for(var i = 0; i < StudentList.length; i++){
jsStudent = StudentList[i];
if(jsStudent!=null&&jsStudent.num==num){
break;
}else if(i==StudentList.length-1){
jsStudent = new student();
jsStudent.num = num;
jsStudent.name = "";
jsStudent.age = "";
jsStudent.sex = "";
}
}
table += "<tr align='center'><td>姓名</td><td><input type='text' id='"+jsStudent.num+"name' value="+jsStudent.name+"></td></tr>";
table += "<tr align='center'><td>年龄</td><td><input type='text' id='"+jsStudent.num+"age' value="+jsStudent.age+"></td></tr>";
table += "<tr align='center'><td>性别</td><td><input type='text' id='"+jsStudent.num+"sex' value="+jsStudent.sex+"></td></tr>";
table += "<tr align='center'><td colspan=2><input type=button onclick=saveEntity("+num+") value='保存'/></td></tr></table>"
div.innerHTML = table;
showDIV();
}

/**
*保存学生实体,转化为Elemental,保存到XML文件
*/
function saveEntity(num){
var isNew = false;
for(var i = 0; i < Students.length; i++){
xmlStudent = Students[i];
if(xmlStudent.getAttribute("num")==num){
break;
}else if(i==Students.length){
xmlStudent = xmlDoc.CreateElement("Student");
isNew = true;
}
}
xmlStudent.setAttribute("num",num);
xmlStudent.setAttribute("name",document.getElementById(num+"name").value);
xmlStudent.setAttribute("age",document.getElementById(num+"age").value);
xmlStudent.setAttribute("sex",document.getElementById(num+"sex").value);

if(isNew){
root.AppendChild(xmlStudent);
}
//客户端保存有问题,先注掉
//xmlDoc.save("xmlForYaWu.xml");
}

/**
*添加一个学生实体,则将编号加1,然后调用编辑的方法
*/
function addEntity(){
editEntity((Students.length+1));
}

/**
*删除指定NUM的节点
*/
function deleEntity(num){
xmlStudent = null;
for(var i = 0; i < Students.length; i++){
xmlStudent = Students[i];
if(xmlStudent.getAttribute("num")==num){
break;
}
}
//删除、保存有问题,先注掉
//xmlStudent.removeAll();
//xmlDoc.save("xmlForYaWu.xml");
}
</script>


XML文件

<?xml version="1.0" encoding="GB2312"?>
<Students>
<Student num="1" name="张三" age="22" sex="男"/>
<Student num="2" name="李四" age="23" sex="男"/>
<Student num="3" name="王五" age="24" sex="男"/>
</Students>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值