Javascript与XML
XML文件（存储我的联系人）
Code
<?xml version="1.0" encoding="gb2312" ?>
<mylxr>
<lxr id = "1" >
<name type = "朋友">张三</name>
<age>18</age>
<sex>男</sex>
<Tel type = "住宅">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
<lxr id = "2" >
<name type = "朋友">李四</name>
<age>19</age>
<sex>男</sex>
<Tel type = "住宅">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
<lxr id = "3" >
<name type = "同事">王五</name>
<age>20</age>
<sex>男</sex>
<Tel type = "手机">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
</mylxr>
Javascript遍历XML
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function showAll()
{
//IE通过微软的 XML 解析器来加载 XM
//创建一个空的微软 XML 文档对象
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDOC.async = false;
//告知解析器加载名为 "test.xml" 的 XML 文档
xmlDOC.load("test.xml");
//获取根节点
var root = xmlDOC.documentElement;
document.write(root.nodeName);
//获取子节点
var lxrs = root.childNodes;
document.write("<table border='1' cellspacing='0.5' cellpadding='0.5' style='border-color: #C1C4C8'>");
document.write("<tr height = '35px'>");
document.write("<td>姓名</td>");
document.write("<td>年龄</td>");
document.write("<td>性别</td>");
document.write("<td>联系方式</td>");
document.write("<td>住址</td>");
document.write("</tr>");
for(var i = 0;i<lxrs.length;i++)
{
document.write("<tr height = '35px'>");
var lxr = lxrs[i].childNodes;
for(var j = 0; j < lxr.length;j++)
{
document.write("<td>");
document.write(lxr[j].nodeName + " : " + lxr[j].firstChild.nodeValue + "<br/>");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table");
}
</script>
<BODY >
<div id = "lxrInfo">
<script type = "text/javascript">
showAll();
</script>
</div>
</BODY>
</HTML>
Javascript向XML中添加新的元素
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY >
<table>
<tr>
<td>姓名</td>
<td><input type ="text" id = "strname"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strnameType">
<option value ="朋友">朋友</option>
<option value ="同事">同事</option>
<option value ="家人">家人</option>
</select>
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type ="text" id = "strAge"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type ="radio" name = "radioSex" value = "男">男
<input type ="radio" name = "radioSex" value = "女">女
</td>
</tr>
<tr>
<td>联系电话</td>
<td><input type ="text" id = "strTel"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strTelType">
<option value ="住宅">住宅</option>
<option value ="工作">工作</option>
<option value ="生活">生活</option>
</select>
</td>
</tr>
<tr>
<td>住址</td>
<td><input type ="text" id = "stradd"></td>
</tr>
<tr>
<td rowspan= 2><input type = "button" onclick = "lxrAdd()" value= "添加"></td>
</tr>
</table>
<script type ="text/javascript">
<!--
function lxrAdd()
{
var strname = document.getElementById("strname").value;
var strnameType = document.getElementById("strnameType");
strnameType = strnameType.options[strnameType.selectedIndex].value;
var strAge = document.getElementById("strAge").value;
var radioSex = document.getElementsByName("radioSex");
var strSex;
for(var i = 0;i<radioSex.length;i++)
{
if(radioSex[i].checked)
{
strSex = radioSex[i].value;
}
}
var strTel = document.getElementById("strTel").value;
var strTelType = document.getElementById("strTelType").value;
var stradd = document.getElementById("stradd").value;
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
xmlDOC.async = false;
xmlDOC.load("test.xml");
var root = xmlDOC.documentElement;
var lxrs = root.childNodes;
var lxr = xmlDOC.createElement("lxr");
var lxrid = root.lastChild.getAttribute("id");
lxrid = lxrid +1;
lxr.setAttribute("id",lxrid)
//新建元素
var name = xmlDOC.createElement("name");
name.text = strname;
name.setAttribute("type",strnameType);
var age = xmlDOC.createElement("age");
age.text = strname;
var sex = xmlDOC.createElement("sex");
lxr.text = strname;
var tel = xmlDOC.createElement("tel");
tel.text = strname;
tel.setAttribute("type",strTelType)
var Address = xmlDOC.createElement("Address");
Address.text = strname;
//在lxr的末尾加子节点
lxr.appendChild(name);
lxr.appendChild(age);
lxr.appendChild(sex);
lxr.appendChild(tel);
lxr.appendChild(Address);
root.appendChild(lxr);
alert(xmlDOC.xml);
}
-->
</script>
</BODY>
</HTML>
完整
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function createXML()
{
//创建一个空的微软 XML 文档对象
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDOC.async = false;
//告知解析器加载名为 "test.xml" 的 XML 文档
xmlDOC.load("test.xml");
}
function showAll()
{
createXML();
var root = xmlDOC.documentElement;
document.write(root.nodeName);
//获取子节点
var lxrs = root.childNodes;
document.write("<table border='1' cellspacing='0.5' cellpadding='0.5' style='border-color: #C1C4C8'>");
document.write("<tr height = '35px'>");
document.write("<td>姓名</td>");
document.write("<td>年龄</td>");
document.write("<td>性别</td>");
document.write("<td>联系方式</td>");
document.write("<td>住址</td>");
document.write("</tr>");
for(var i = 0;i<lxrs.length;i++)
{
document.write("<tr height = '35px'>");
var lxr = lxrs[i].childNodes;
for(var j = 0; j < lxr.length;j++)
{
document.write("<td>");
document.write(lxr[j].nodeName + " : " + lxr[j].firstChild.nodeValue + "<br/>");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table");
}
</script>
<BODY >
<div id = "lxrInfo">
<script type = "text/javascript">
showAll();
</script>
</div>
<table>
<tr>
<td>姓名</td>
<td><input type ="text" id = "strname"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strnameType">
<option value ="朋友">朋友</option>
<option value ="同事">同事</option>
<option value ="家人">家人</option>
</select>
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type ="text" id = "strAge"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type ="radio" name = "radioSex" value = "男">男
<input type ="radio" name = "radioSex" value = "女">女
</td>
</tr>
<tr>
<td>联系电话</td>
<td><input type ="text" id = "strTel"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strTelType">
<option value ="住宅">住宅</option>
<option value ="工作">工作</option>
<option value ="生活">生活</option>
</select>
</td>
</tr>
<tr>
<td>住址</td>
<td><input type ="text" id = "stradd"></td>
</tr>
<tr>
<td rowspan= 2><input type = "button" onclick = "lxrAdd()" value= "添加"></td>
</tr>
</table>
<script type ="text/javascript">
<!--
function lxrAdd()
{
//获取表单中数据
var strname = document.getElementById("strname").value;
var strnameType = document.getElementById("strnameType");
strnameType = strnameType.options[strnameType.selectedIndex].value;
var strAge = document.getElementById("strAge").value;
var radioSex = document.getElementsByName("radioSex");
var strSex;
for(var i = 0;i<radioSex.length;i++)
{
if(radioSex[i].checked)
{
strSex = radioSex[i].value;
}
}
var strTel = document.getElementById("strTel").value;
var strTelType = document.getElementById("strTelType").value;
var stradd = document.getElementById("stradd").value;
//
createXML();
var root = xmlDOC.documentElement;
var lxrs = root.childNodes;
var lxr = xmlDOC.createElement("lxr");
var lxrid = root.lastChild.getAttribute("id");
lxrid = lxrid +1;
lxr.setAttribute("id",lxrid)
var name = xmlDOC.createElement("name");
name.text = strname;
name.setAttribute("type",strnameType);
var age = xmlDOC.createElement("age");
age.text = strname;
var sex = xmlDOC.createElement("sex");
lxr.text = strname;
var tel = xmlDOC.createElement("tel");
tel.text = strname;
tel.setAttribute("type",strTelType)
var Address = xmlDOC.createElement("Address");
Address.text = strname;
lxr.appendChild(name);
lxr.appendChild(age);
lxr.appendChild(sex);
lxr.appendChild(tel);
lxr.appendChild(Address);
root.appendChild(lxr);
alert(xmlDOC.xml);
}
-->
</script>
</BODY>
</HTML>
待续……
Code<?xml version="1.0" encoding="gb2312" ?>
<mylxr>
<lxr id = "1" >
<name type = "朋友">张三</name>
<age>18</age>
<sex>男</sex>
<Tel type = "住宅">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
<lxr id = "2" >
<name type = "朋友">李四</name>
<age>19</age>
<sex>男</sex>
<Tel type = "住宅">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
<lxr id = "3" >
<name type = "同事">王五</name>
<age>20</age>
<sex>男</sex>
<Tel type = "手机">123456</Tel>
<Address>sjsjsjjsjs</Address>
</lxr>
</mylxr>
Javascript遍历XML
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function showAll()
{
//IE通过微软的 XML 解析器来加载 XM
//创建一个空的微软 XML 文档对象
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDOC.async = false;
//告知解析器加载名为 "test.xml" 的 XML 文档
xmlDOC.load("test.xml");
//获取根节点
var root = xmlDOC.documentElement;
document.write(root.nodeName);
//获取子节点
var lxrs = root.childNodes;
document.write("<table border='1' cellspacing='0.5' cellpadding='0.5' style='border-color: #C1C4C8'>");
document.write("<tr height = '35px'>");
document.write("<td>姓名</td>");
document.write("<td>年龄</td>");
document.write("<td>性别</td>");
document.write("<td>联系方式</td>");
document.write("<td>住址</td>");
document.write("</tr>");
for(var i = 0;i<lxrs.length;i++)
{
document.write("<tr height = '35px'>");
var lxr = lxrs[i].childNodes;
for(var j = 0; j < lxr.length;j++)
{
document.write("<td>");
document.write(lxr[j].nodeName + " : " + lxr[j].firstChild.nodeValue + "<br/>");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table");
}
</script>
<BODY >
<div id = "lxrInfo">
<script type = "text/javascript">
showAll();
</script>
</div>
</BODY>
</HTML>
Javascript向XML中添加新的元素
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY >
<table>
<tr>
<td>姓名</td>
<td><input type ="text" id = "strname"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strnameType">
<option value ="朋友">朋友</option>
<option value ="同事">同事</option>
<option value ="家人">家人</option>
</select>
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type ="text" id = "strAge"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type ="radio" name = "radioSex" value = "男">男
<input type ="radio" name = "radioSex" value = "女">女
</td>
</tr>
<tr>
<td>联系电话</td>
<td><input type ="text" id = "strTel"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strTelType">
<option value ="住宅">住宅</option>
<option value ="工作">工作</option>
<option value ="生活">生活</option>
</select>
</td>
</tr>
<tr>
<td>住址</td>
<td><input type ="text" id = "stradd"></td>
</tr>
<tr>
<td rowspan= 2><input type = "button" onclick = "lxrAdd()" value= "添加"></td>
</tr>
</table>
<script type ="text/javascript">
<!--
function lxrAdd()
{
var strname = document.getElementById("strname").value;
var strnameType = document.getElementById("strnameType");
strnameType = strnameType.options[strnameType.selectedIndex].value;
var strAge = document.getElementById("strAge").value;
var radioSex = document.getElementsByName("radioSex");
var strSex;
for(var i = 0;i<radioSex.length;i++)
{
if(radioSex[i].checked)
{
strSex = radioSex[i].value;
}
}
var strTel = document.getElementById("strTel").value;
var strTelType = document.getElementById("strTelType").value;
var stradd = document.getElementById("stradd").value;
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
xmlDOC.async = false;
xmlDOC.load("test.xml");
var root = xmlDOC.documentElement;
var lxrs = root.childNodes;
var lxr = xmlDOC.createElement("lxr");
var lxrid = root.lastChild.getAttribute("id");
lxrid = lxrid +1;
lxr.setAttribute("id",lxrid)
//新建元素
var name = xmlDOC.createElement("name");
name.text = strname;
name.setAttribute("type",strnameType);
var age = xmlDOC.createElement("age");
age.text = strname;
var sex = xmlDOC.createElement("sex");
lxr.text = strname;
var tel = xmlDOC.createElement("tel");
tel.text = strname;
tel.setAttribute("type",strTelType)
var Address = xmlDOC.createElement("Address");
Address.text = strname;
//在lxr的末尾加子节点
lxr.appendChild(name);
lxr.appendChild(age);
lxr.appendChild(sex);
lxr.appendChild(tel);
lxr.appendChild(Address);
root.appendChild(lxr);
alert(xmlDOC.xml);
}
-->
</script>
</BODY>
</HTML>
完整
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>我的联系人--XML--</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function createXML()
{
//创建一个空的微软 XML 文档对象
xmlDOC = new ActiveXObject("Microsoft.XMLDOM");
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDOC.async = false;
//告知解析器加载名为 "test.xml" 的 XML 文档
xmlDOC.load("test.xml");
}
function showAll()
{
createXML();
var root = xmlDOC.documentElement;
document.write(root.nodeName);
//获取子节点
var lxrs = root.childNodes;
document.write("<table border='1' cellspacing='0.5' cellpadding='0.5' style='border-color: #C1C4C8'>");
document.write("<tr height = '35px'>");
document.write("<td>姓名</td>");
document.write("<td>年龄</td>");
document.write("<td>性别</td>");
document.write("<td>联系方式</td>");
document.write("<td>住址</td>");
document.write("</tr>");
for(var i = 0;i<lxrs.length;i++)
{
document.write("<tr height = '35px'>");
var lxr = lxrs[i].childNodes;
for(var j = 0; j < lxr.length;j++)
{
document.write("<td>");
document.write(lxr[j].nodeName + " : " + lxr[j].firstChild.nodeValue + "<br/>");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table");
}
</script>
<BODY >
<div id = "lxrInfo">
<script type = "text/javascript">
showAll();
</script>
</div>
<table>
<tr>
<td>姓名</td>
<td><input type ="text" id = "strname"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strnameType">
<option value ="朋友">朋友</option>
<option value ="同事">同事</option>
<option value ="家人">家人</option>
</select>
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type ="text" id = "strAge"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type ="radio" name = "radioSex" value = "男">男
<input type ="radio" name = "radioSex" value = "女">女
</td>
</tr>
<tr>
<td>联系电话</td>
<td><input type ="text" id = "strTel"></td>
</tr>
<tr>
<td>类别</td>
<td>
<select id="strTelType">
<option value ="住宅">住宅</option>
<option value ="工作">工作</option>
<option value ="生活">生活</option>
</select>
</td>
</tr>
<tr>
<td>住址</td>
<td><input type ="text" id = "stradd"></td>
</tr>
<tr>
<td rowspan= 2><input type = "button" onclick = "lxrAdd()" value= "添加"></td>
</tr>
</table>
<script type ="text/javascript">
<!--
function lxrAdd()
{
//获取表单中数据
var strname = document.getElementById("strname").value;
var strnameType = document.getElementById("strnameType");
strnameType = strnameType.options[strnameType.selectedIndex].value;
var strAge = document.getElementById("strAge").value;
var radioSex = document.getElementsByName("radioSex");
var strSex;
for(var i = 0;i<radioSex.length;i++)
{
if(radioSex[i].checked)
{
strSex = radioSex[i].value;
}
}
var strTel = document.getElementById("strTel").value;
var strTelType = document.getElementById("strTelType").value;
var stradd = document.getElementById("stradd").value;
//
createXML();
var root = xmlDOC.documentElement;
var lxrs = root.childNodes;
var lxr = xmlDOC.createElement("lxr");
var lxrid = root.lastChild.getAttribute("id");
lxrid = lxrid +1;
lxr.setAttribute("id",lxrid)
var name = xmlDOC.createElement("name");
name.text = strname;
name.setAttribute("type",strnameType);
var age = xmlDOC.createElement("age");
age.text = strname;
var sex = xmlDOC.createElement("sex");
lxr.text = strname;
var tel = xmlDOC.createElement("tel");
tel.text = strname;
tel.setAttribute("type",strTelType)
var Address = xmlDOC.createElement("Address");
Address.text = strname;
lxr.appendChild(name);
lxr.appendChild(age);
lxr.appendChild(sex);
lxr.appendChild(tel);
lxr.appendChild(Address);
root.appendChild(lxr);
alert(xmlDOC.xml);
}
-->
</script>
</BODY>
</HTML>
待续……
