javascript操作xml(增删改查)例子代码
包括了stu.hta(是HTML应用程序);
stu.xml
注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!
文件stu.hta代码如下:
代码
<
html
>
<
head
>
<
title
>
数据岛的显示
</
title
>
<
style type
=
"
text/css
"
>
#findPanel
{
position:absolute;
width:220px;
border:1px solid #
666666
;
}
#findPanelTitle
{
height:10px;
background
-
color:#
336699
;
cursor:move;
}
#findPanelContent
{
padding:5px 5px 5px 5px;
background
-
color:#6699CC;
}
</
style
>
</
head
>
<
body
>
<
SCRIPT LANGUAGE
=
"
JavaScript
"
>
<!--
var xmlDoc
=
new
ActiveXObject(
"
Msxml2.DOMDocument
"
);
xmlDoc.async
=
false
;
xmlDoc.resolveExternals
=
false
;
xmlDoc.load(
"
stu.xml
"
);
//
alert(xmlDoc.xml);
//
显示数据
function show(){
var vbo
=
document.getElementById(
"
s
"
).value;
if
(vbo
==
"
显示学生信息
"
){
document.getElementById(
'
info
'
).style.visibility
=
'
visible
'
;
document.getElementById(
"
s
"
).value
=
"
隐藏学生信息
"
;
}
else
{
document.getElementById(
'
info
'
).style.visibility
=
'
hidden
'
;
document.getElementById(
"
s
"
).value
=
"
显示学生信息
"
;
}
}
//
查找
function que(){
document.getElementById(
"
ad
"
).style.visibility
=
"
visible
"
;
document.getElementById(
"
qmd
"
).style.visibility
=
"
visible
"
;
}
/*
*
* 解析XML文件函数
* @param xmlDoc XML对象
* @param name 属性名称 格式如:user.name
*/
function getXMLProperty(xmlDoc, name) {
var keys
=
name.split(
'
.
'
);
var node
=
xmlDoc.documentElement;
for
(var i
=
0
; i
<
keys.length; i
++
) {
var childs
=
node.childNodes;
var key
=
keys[i];
for
(var k
=
0
; k
<
childs.length; k
++
) {
var child
=
childs[k];
if
(child.nodeName
==
key) {
if
(child.childNodes.length
==
1
) {
return
child.text;
}
else
{
node
=
child;
break
;
}
}
}
}
return
""
;
}
//
返回父节点(通过节点名字和节点值)
function getNod(nam,val){
var node
=
xmlDoc.documentElement;
var childs
=
node.childNodes;
for
(var i
=
0
;i
<
childs.length ;i
++
)
{
var child
=
childs[i];
var childms
=
child.childNodes;
for
(var k
=
0
;k
<
childms.length;k
++
){
var childm
=
childms[k];
if
(childm.nodeName
==
nam
&&
(childm.text).substring(
0
,
6
)
==
val){
//
alert(val);
return
child;
}
}
}
return
''
;
}
//
通过父节点和子节点名返回子节点值
function getNodVal(nods,nam){
var childms
=
nods.childNodes;
for
(var k
=
0
;k
<
childms.length;k
++
){
var childm
=
childms[k];
if
(childm.nodeName
==
nam){
//
alert(childm.text);
return
childm.text;
}
}
return
''
;
}
//
通过父节点和子节点名返回子节点
function getCurNod(nods,nam){
var childms
=
nods.childNodes;
for
(var k
=
0
;k
<
childms.length;k
++
){
var childm
=
childms[k];
if
(childm.nodeName
==
nam){
//
alert(childm.text);
return
childm;
}
}
return
''
;
}
//
开始查找
function query(){
var renum
=
/^
\d{
5
}$
/
;
if
(renum.exec(xh.value)){
if
(xmlDoc.selectSingleNode(
"
/学生管理[学生/学号=
"
+
xh.value
+
"
]
"
)){
var nod
=
getNod(
'
学号
'
,xh.value);
//
getNodVal(nod,'姓名');
//
getNodVal(nod,'性别');
//
getNodVal(nod,'籍贯');
/*
document.getElementById("xm").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text;
document.getElementById("xb").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text;
document.getElementById("jg").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text;
document.getElementById("xh").disabled="true";
*/
document.getElementById(
"
xm
"
).value
=
getNodVal(nod,
'
姓名
'
);
document.getElementById(
"
xb
"
).value
=
getNodVal(nod,
'
性别
'
);
document.getElementById(
"
jg
"
).value
=
getNodVal(nod,
'
籍贯
'
);
}
else
{
alert(
"
该学号还没有被占用!
"
);
}
}
else
{
alert(
"
学号非法!学号5位数字!
"
);
return
false
;
}
}
//
修改
function mod(){
if
(info_check()){
if
(xmlDoc.selectSingleNode(
"
/学生管理[学生/学号=
"
+
xh.value
+
"
]
"
)){
if
(confirm(
"
确认修改？
"
)){
var nod
=
getNod(
'
学号
'
,xh.value);
getCurNod(nod,
'
姓名
'
).text
=
xm.value;
getCurNod(nod,
'
性别
'
).text
=
xb.value;
getCurNod(nod,
'
籍贯
'
).text
=
jg.value;
/*
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text=xm.value;
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text=xb.value;
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text=jg.value;
*/
saveXML();
//
document.getElementById("xh").disabled="false";
document.getElementById(
"
xh
"
).value
=
""
;
document.getElementById(
"
xm
"
).value
=
""
;
document.getElementById(
"
xb
"
).value
=
""
;
document.getElementById(
"
jg
"
).value
=
""
;
document.getElementById(
"
ad
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
qmd
"
).style.visibility
=
"
hidden
"
;
alert(
"
修改成功!
"
);
location.reload();
}
}
else
{
alert(
"
该学号还没有被占用!请按学号查询再进行修改!
"
);
return
false
;
}
}
}
//
新增学生
function add(){
var vadd
=
document.getElementById(
"
add
"
).value;
if
(vadd
==
"
新增
"
){
document.getElementById(
"
xh
"
).value
=
""
;
document.getElementById(
"
xm
"
).value
=
""
;
document.getElementById(
"
xb
"
).value
=
""
;
document.getElementById(
"
jg
"
).value
=
""
;
document.getElementById(
"
qmd
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
'
info
'
).style.visibility
=
'
hidden
'
;
document.getElementById(
"
s
"
).value
=
"
显示学生信息
"
;
document.getElementById(
"
ad
"
).style.visibility
=
"
visible
"
;
document.getElementById(
"
add
"
).value
=
"
保存
"
;
document.getElementById(
"
can
"
).style.visibility
=
"
visible
"
;
}
else
{
if
(info_check()){
add_node();
saveXML();
document.getElementById(
"
xh
"
).value
=
""
;
document.getElementById(
"
xm
"
).value
=
""
;
document.getElementById(
"
xb
"
).value
=
""
;
document.getElementById(
"
jg
"
).value
=
""
;
document.getElementById(
"
ad
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
qmd
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
add
"
).value
=
"
新增
"
;
alert(
"
新增成功!
"
);
location.reload();
}
}
}
//
删除学生
function del(){
var renum
=
/^
\d{
5
}$
/
;
if
(renum.exec(document.getElementById(
"
xh
"
).value)){
if
(xmlDoc.selectSingleNode(
"
/学生管理[学生/学号=
"
+
xh.value
+
"
]
"
)){
if
(confirm(
"
确认删除？
"
)){
/*
var node = xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]");
if(node.hasChildNodes()){
var kids = node.childNodes;
for(var i=0;i<kids.length;i++){
del();
}
}
node.parentNode.removeChild(node);
*/
var nod
=
getNod(
'
学号
'
,xh.value);
nod.parentNode.removeChild(nod);
saveXML();
can();
alert(
"
删除成功!
"
);
location.reload();
}
}
else
{
alert(
"
该学号还没有被占用!请按学号查询再进行修改!
"
);
return
false
;
}
}
else
{
alert(
"
学号非法!为5位数字!
"
);
return
false
;
}
}
//
取消新增
function can(){
document.getElementById(
"
xh
"
).value
=
""
;
document.getElementById(
"
xm
"
).value
=
""
;
document.getElementById(
"
xb
"
).value
=
""
;
document.getElementById(
"
jg
"
).value
=
""
;
document.getElementById(
"
ad
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
can
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
qmd
"
).style.visibility
=
"
hidden
"
;
document.getElementById(
"
add
"
).value
=
"
新增
"
;
}
//
增加结点
function add_node(){
var oxh
=
xmlDoc.createElement(
"
学号
"
);
oxh.appendChild(xmlDoc.createTextNode(xh.value));
var oxm
=
xmlDoc.createElement(
"
姓名
"
);
oxm.appendChild(xmlDoc.createTextNode(xm.value));
var oxb
=
xmlDoc.createElement(
"
性别
"
);
oxb.appendChild(xmlDoc.createTextNode(xb.value));
var ojg
=
xmlDoc.createElement(
"
籍贯
"
);
ojg.appendChild(xmlDoc.createTextNode(jg.value));
var oxs
=
xmlDoc.createElement(
"
学生
"
);
oxs.appendChild(oxh);
oxs.appendChild(oxm);
oxs.appendChild(oxb);
oxs.appendChild(ojg);
var parent
=
xmlDoc.selectSingleNode(
"
/学生管理
"
);
if
(parent.hasChildNodes()) {
parent.insertBefore(oxs,parent.firstChild);
}
else
{
parent.appendChild(oxs);
}
}
//
保存XML
function saveXML(){
xmlDoc.save(
"
stu.xml
"
);
}
//
验证新增数据
function info_check(){
var renum
=
/^
\d{
5
}$
/
;
var rec
=
/^
[\u4E00
-
\u9FA5]{
2
,
5
}$
/
;
if
(
!
renum.exec(document.getElementById(
"
xh
"
).value)){
alert(
"
学号非法!为5位数字!
"
);
return
false
;
}
if
(
!
rec.exec(xm.value)){
alert(
"
姓名非法!只能是中文最少两个字,最多不得超过5个字!
"
);
return
false
;
}
//
alert(xb.value!="男");
switch
(xb.value){
case
"
男
"
:
break
;
case
"
女
"
:
break
;
default
:alert(
"
性别只能是\
"
男\
"
或\
"
女\
"
!
"
);
return
false
;
}
if
(
!
rec.exec(jg.value)){
alert(
"
籍贯非法!只能是中文最少两个字,最多不得超过5个字!！
"
);
return
false
;
}
return
true
;
}
//
-->
</
SCRIPT
>
<
input id
=
"
s
"
type
=
button value
=
"
显示学生信息
"
onclick
=
"
show();
"
>
<
input id
=
"
que
"
type
=
button value
=
"
精确查询
"
onclick
=
"
que();
"
>
<
input id
=
"
add
"
type
=
button value
=
"
新增
"
onclick
=
"
add();
"
>
<
input id
=
"
can
"
type
=
button value
=
"
取消
"
onclick
=
"
can();
"
style
=
"
visibility:hidden
"
>
<
br
>
<
center
>
<
div id
=
"
ad
"
style
=
"
visibility:hidden
"
>
<
table
><
tr
><
td
>
学号:
<
input type
=
text id
=
"
xh
"
style
=
"
ime-mode:disabled
"
size
=
5
maxlength
=
5
onKeyPress
=
"
if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false
"
><!--
style 用于光闭输入法 onKeyPress 只能输入数字
-->
</
td
><
td
>
姓名:
<
input type
=
text id
=
"
xm
"
size
=
10
maxlength
=
5
>
</
td
><
td
>
性别:
<
input type
=
text id
=
"
xb
"
size
=
5
maxlength
=
5
>
</
td
><
td
>
籍贯:
<
input type
=
text id
=
"
jg
"
size
=
10
maxlength
=
5
>
</
td
>
</
tr
>
</
table
>
</
div
>
<
div id
=
"
qmd
"
style
=
"
visibility:hidden
"
>
<
table
>
<
tr align
=
"
center
"
>
<
td
></
td
>
<
td
><
input id
=
"
que
"
type
=
button value
=
"
查询
"
onclick
=
"
query();
"
></
td
>
<
td
><
input id
=
"
mod
"
type
=
button value
=
"
修改
"
onclick
=
"
mod();
"
></
td
>
<
td
><
input id
=
"
del
"
type
=
button value
=
"
删除
"
onclick
=
"
del();
"
></
td
>
</
tr
>
</
table
>
</
div
>
</
center
>
<
div id
=
"
findPanel
"
>
<
div id
=
"
findPanelTitle
"
>
可拖动
</
div
>
<
div id
=
"
findPanelContent
"
>
<
input type
=
"
text
"
size
=
"
20
"
value
=
"
a
"
id
=
"
key
"
onkeydown
=
"
javascript:ChckSubmit(event);
"
>
<
input type
=
"
button
"
value
=
"
查找
"
onclick
=
"
javascript:OnKeySubmit();
"
>
</
div
>
</
div
>
<
script language
=
"
javascript
"
>
<!--
var findPanel
=
document.getElementById(
"
findPanel
"
);
var findPanelTitle
=
document.getElementById(
"
findPanelTitle
"
);
var findPanelContent
=
document.getElementById(
"
findPanelContent
"
);
var findPanel_orgnX
=
50
;
var findPanel_orgnY
=
50
;
//
设置物件位置
findPanel.style.pixelLeft
=
document.body.scrollLeft
+
findPanel_orgnX;
findPanel.style.pixelTop
=
document.body.scrollTop
+
findPanel_orgnY;
//
================================================================================
var foundCnt
=
0
;
//
已经找到了的结果的数量
//
查找入口函数
function Find(key)
{
if
(key
==
""
)
{
return
;
}
if
(document.all)
{
IEFind(key);
}
else
{
NSFind(key);
}
}
//
浏览器为 IE 系列
function IEFind(key)
{
var rng
=
document.body.createTextRange();
var found
=
false
;
for
(var i
=
0
; i
<=
foundCnt
&&
(found
=
rng.findText(key)); i
++
)
{
rng.moveStart(
"
character
"
,
1
);
//
找到，后移一位以查找下一个
}
if
(found)
{
rng.moveStart(
"
character
"
,
-
1
);
rng.findText(key);
rng.select();
rng.scrollIntoView();
foundCnt
++
;
}
else
{
if
(foundCnt
>
0
)
{
//
已经查找一遍，找到有符合条件的结果，重新开始查找
foundCnt
=
0
;
IEFind(key);
}
else
{
//
已经查找一遍，没有找到符合条件的结果
alert(
"
文档搜索完毕。
"
);
}
}
}
//
浏览器为 NS 系列
function NSFind(key)
{
if
(window.find(key))
{
foundCnt
++
;
}
else
{
var found
=
false
;
while
(window.find(key,
false
,
true
))
{
found
=
true
;
}
if
(found)
{
//
已经查找一遍，找到有符合条件的结果，重新查找也已经开始
foundCnt
=
1
;
}
else
{
//
已经查找一遍，没有找到符合条件的结果
alert(
"
文档搜索完毕。
"
);
}
}
}
function OnKeySubmit()
{
var key
=
document.getElementById(
"
key
"
);
Find(key.value);
}
function ChckSubmit(e)
{
if
(e.keyCode
==
13
)
{
OnKeySubmit();
}
}
//
================================================================================
function RePosFindPanel()
{
findPanel.style.pixelLeft
=
document.body.scrollLeft
+
findPanel_orgnX;
findPanel.style.pixelTop
=
document.body.scrollTop
+
findPanel_orgnY;
}
document.body.onscroll
=
RePosFindPanel;
document.body.onresize
=
RePosFindPanel;
//
================================================================================
//
拖拽过程中相关变量
var draging
=
false
;
//
是否处于拖拽中
var offsetX
=
0
;
//
X方向左右偏移量
var offsetY
=
0
;
//
Y方向上下偏移量
//
准备拖拽
function BeforeDrag()
{
if
(
event
.button
!=
1
)
{
return
;
}
offsetX
=
document.body.scrollLeft
+
event
.clientX
-
findPanel.style.pixelLeft;
offsetY
=
document.body.scrollTop
+
event
.clientY
-
findPanel.style.pixelTop;
draging
=
true
;
}
//
拖拽中
function OnDrag()
{
if
(
!
draging)
{
return
;
}
//
更新位置
findPanel_orgnX
=
event
.clientX
-
offsetX;
findPanel_orgnY
=
event
.clientY
-
offsetY;
event
.returnValue
=
false
;
findPanel.style.pixelLeft
=
document.body.scrollLeft
+
event
.clientX
-
offsetX;
findPanel.style.pixelTop
=
document.body.scrollTop
+
event
.clientY
-
offsetY;
}
//
结束拖拽
function EndDrag()
{
if
(
event
.button
!=
1
)
{
return
;
}
draging
=
false
;
}
findPanelTitle.onmousedown
=
BeforeDrag;
document.onmousemove
=
OnDrag;
findPanelTitle.onmouseup
=
EndDrag;
//
-->
</
script
>
<
xml id
=
"
stu
"
src
=
"
stu.xml
"
>
</
xml
>
<
center
>
<
div id
=
"
info
"
style
=
"
visibility:hidden
"
>
<
table DATASRC
=
#stu border
=
1
style
=
"
background-color:#a9eeef; Border-color
:red;
"
>
<
caption
><
h2
>
学生信息管理
</
h2
></
caption
>
<
thead
>
<
th
>
学号
</
th
>
<
th
>
姓名
</
th
>
<
th
>
性别
</
th
>
<
th
>
籍贯
</
th
>
</
thead
>
<
tr
>
<
td
>
<
div DATAFLD
=
"
学号
"
>
</
td
>
<
td
>
<
div DATAFLD
=
"
姓名
"
>
</
td
>
<
td
>
<
div DATAFLD
=
"
性别
"
>
</
td
>
<
td
>
<
div DATAFLD
=
"
籍贯
"
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
center
>
</
body
>
</
html
>
xml文件如下(stu.xml)
代码
<?
xml version
=
"
1.0
"
encoding
=
"
gb2312
"
?>
<
学生管理
>
<
学生
>
<
学号
>
97001
</
学号
>
<
姓名
>
王五
</
姓名
>
<
性别
>
男
</
性别
>
<
籍贯
>
上海
</
籍贯
>
</
学生
>
<
学生
>
<
学号
>
97002
</
学号
>
<
姓名
>
李四
</
姓名
>
<
性别
>
男
</
性别
>
<
籍贯
>
浙江
</
籍贯
>
</
学生
>
<
学生
>
<
学号
>
97006
</
学号
>
<
姓名
>
张三
</
姓名
>
<
性别
>
男
</
性别
>
<
籍贯
>
浙江
</
籍贯
>
</
学生
>
</
学生管理
>