关键字: javascript操作xml(增删改查)
自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!
包括了
stu.hta(
是HTML应用程序);
stu.xml
注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!
文件
stu.hta代码如下:
1. <html>
2. <head>
3. <title> 数据岛的显示 </title>
4. <style type="text/css">
5. #findPanel
6. {
7. position:absolute;
8. width:220px;
9. border:1px solid #666666;
10. }
11.
12. #findPanelTitle
13. {
14. height:10px;
15. background-color:#336699;
16. cursor:move;
17. }
18.
19. #findPanelContent
20. {
21. padding:5px 5px 5px 5px;
22. background-color:#6699CC;
23. }
24. </style>
25.
26. </head>
27. <body>
28. <SCRIPT LANGUAGE="JavaScript">
29. <!--
30.
31. var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
32. xmlDoc.async = false;
33. xmlDoc.resolveExternals = false;
34. xmlDoc.load("stu.xml");
35. //alert(xmlDoc.xml);
36. //显示数据
37. function show(){
38. var vbo = document.getElementById("s").value;
39. if(vbo=="显示学生信息"){
40. document.getElementById('info').style.visibility='visible';
41. document.getElementById("s").value="隐藏学生信息";
42. }else{
43. document.getElementById('info').style.visibility='hidden';
44. document.getElementById("s").value="显示学生信息";
45. }
46. }
47. //查找
48. function que(){
49. document.getElementById("ad").style.visibility="visible";
50. document.getElementById("qmd").style.visibility="visible";
51. }
52.
53. /**
54. * 解析XML文件函数
55. * @param xmlDoc XML对象
56. * @param name 属性名称 格式如:user.name
57. */
58. function getXMLProperty(xmlDoc, name) {
59. var keys = name.split('.');
60. var node = xmlDoc.documentElement;
61. for(var i=0; i<keys.length; i++) {
62. var childs = node.childNodes;
63. var key = keys[i];
64. for(var k=0; k<childs.length; k++) {
65. var child = childs[k];
66. if(child.nodeName == key) {
67. if(child.childNodes.length == 1) {
68. return child.text;
69. } else {
70. node = child;
71. break;
72. }
73. }
74. }
75. }
76. return "";
77. }
78. //返回父节点(通过节点名字和节点值)
79. function getNod(nam,val){
80. var node = xmlDoc.documentElement;
81. var childs = node.childNodes;
82. for (var i=0;i<childs.length ;i++ )
83. {
84. var child = childs[i];
85. var childms = child.childNodes;
86. for(var k=0;k<childms.length;k++){
87. var childm = childms[k];
88. if(childm.nodeName == nam && (childm.text).substring(0,6)==val){
89. //alert(val);
90. return child;
91. }
92. }
93. }
94. return '';
95. }
96. //通过父节点和子节点名返回子节点值
97. function getNodVal(nods,nam){
98. var childms = nods.childNodes;
99. for(var k=0;k<childms.length;k++){
100. var childm = childms[k];
101. if(childm.nodeName == nam){
102. //alert(childm.text);
103. return childm.text;
104. }
105. }
106.
107. return '';
108. }
109. //通过父节点和子节点名返回子节点
110. function getCurNod(nods,nam){
111. var childms = nods.childNodes;
112. for(var k=0;k<childms.length;k++){
113. var childm = childms[k];
114. if(childm.nodeName == nam){
115. //alert(childm.text);
116. return childm;
117. }
118. }
119.
120. return '';
121. }
122.
123. //开始查找
124. function query(){
125. var renum = /^\d{5}$/;
126. if(renum.exec(xh.value)){
127. if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){
128. var nod = getNod('学号',xh.value);
129. //getNodVal(nod,'姓名');
130. //getNodVal(nod,'性别');
131. //getNodVal(nod,'籍贯');
132. /*document.getElementById("xm").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text;
133. document.getElementById("xb").value=xmlDoc.selectSingleNode("/ 学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text;
134. document.getElementById("jg").value=xmlDoc.selectSingleNode("/ 学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text;
135. document.getElementById("xh").disabled="true"; */
136. document.getElementById("xm").value=getNodVal(nod,'姓名');
137. document.getElementById("xb").value= getNodVal(nod,'性别');
138. document.getElementById("jg").value= getNodVal(nod,'籍贯');
139. }else{
140. alert("该学号还没有被占用!");
141. }
142. }else{
143. alert("学号非法!学号5位数字!");
144. return false;
145. }
146. }
147. //修改
148. function mod(){
149. if(info_check()){
150. if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){
151. if(confirm("确认修改？")){
152. var nod = getNod('学号',xh.value);
153. getCurNod(nod,'姓名').text=xm.value;
154. getCurNod(nod,'性别').text=xb.value;
155. getCurNod(nod,'籍贯').text=jg.value;
156. /*
157. xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text=xm.value;
158. xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text=xb.value;
159. xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text=jg.value;
160. */
161. saveXML();
162. //document.getElementById("xh").disabled="false";
163. document.getElementById("xh").value="";
164. document.getElementById("xm").value="";
165. document.getElementById("xb").value="";
166. document.getElementById("jg").value="";
167. document.getElementById("ad").style.visibility="hidden";
168. document.getElementById("qmd").style.visibility="hidden";
169. alert("修改成功!");
170. location.reload();
171. }
172. }else{
173. alert("该学号还没有被占用!请按学号查询再进行修改!");
174. return false;
175. }
176. }
177. }
178. //新增学生
179. function add(){
180. var vadd = document.getElementById("add").value;
181. if(vadd=="新增"){
182. document.getElementById("xh").value="";
183. document.getElementById("xm").value="";
184. document.getElementById("xb").value="";
185. document.getElementById("jg").value="";
186. document.getElementById("qmd").style.visibility="hidden";
187. document.getElementById('info').style.visibility='hidden';
188. document.getElementById("s").value="显示学生信息";
189. document.getElementById("ad").style.visibility="visible";
190. document.getElementById("add").value="保存";
191. document.getElementById("can").style.visibility="visible";
192. }else{
193. if(info_check()){
194. add_node();
195. saveXML();
196. document.getElementById("xh").value="";
197. document.getElementById("xm").value="";
198. document.getElementById("xb").value="";
199. document.getElementById("jg").value="";
200. document.getElementById("ad").style.visibility="hidden";
201. document.getElementById("qmd").style.visibility="hidden";
202. document.getElementById("add").value="新增";
203. alert("新增成功!");
204. location.reload();
205. }
206. }
207. }
208.
209. //删除学生
210. function del(){
211. var renum = /^\d{5}$/;
212. if(renum.exec(document.getElementById("xh").value)){
213. if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){
214. if(confirm("确认删除？")){
215. /*var node = xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]");
216. if(node.hasChildNodes()){
217. var kids = node.childNodes;
218. for(var i=0;i<kids.length;i++){
219. del();
220. }
221. }
222. node.parentNode.removeChild(node);
223. */
224. var nod = getNod('学号',xh.value);
225. nod.parentNode.removeChild(nod);
226.
227. saveXML();
228. can();
229. alert("删除成功!");
230. location.reload();
231. }
232. }else{
233. alert("该学号还没有被占用!请按学号查询再进行修改!");
234. return false;
235. }
236. }else{
237. alert("学号非法!为5位数字!");
238. return false;
239. }
240. }
241.
242.
243. //取消新增
244. function can(){
245. document.getElementById("xh").value="";
246. document.getElementById("xm").value="";
247. document.getElementById("xb").value="";
248. document.getElementById("jg").value="";
249. document.getElementById("ad").style.visibility="hidden";
250. document.getElementById("can").style.visibility="hidden";
251. document.getElementById("qmd").style.visibility="hidden";
252. document.getElementById("add").value="新增";
253. }
254. //增加结点
255. function add_node(){
256. var oxh = xmlDoc.createElement("学号");
257. oxh.appendChild(xmlDoc.createTextNode(xh.value));
258. var oxm = xmlDoc.createElement("姓名");
259. oxm.appendChild(xmlDoc.createTextNode(xm.value));
260. var oxb = xmlDoc.createElement("性别");
261. oxb.appendChild(xmlDoc.createTextNode(xb.value));
262. var ojg = xmlDoc.createElement("籍贯");
263. ojg.appendChild(xmlDoc.createTextNode(jg.value));
264.
265. var oxs = xmlDoc.createElement("学生");
266. oxs.appendChild(oxh);
267. oxs.appendChild(oxm);
268. oxs.appendChild(oxb);
269. oxs.appendChild(ojg);
270.
271. var parent = xmlDoc.selectSingleNode("/学生管理");
272. if(parent.hasChildNodes()) {
273. parent.insertBefore(oxs,parent.firstChild);
274. }else{
275. parent.appendChild(oxs);
276. }
277. }
278. //保存XML
279. function saveXML(){
280. xmlDoc.save("stu.xml");
281. }
282. //验证新增数据
283. function info_check(){
284. var renum = /^\d{5}$/;
285. var rec = /^[\一-\龥]{2,5}$/;
286. if(!renum.exec(document.getElementById("xh").value)){
287. alert("学号非法!为5位数字!");
288. return false;
289. }
290. if(!rec.exec(xm.value)){
291. alert("姓名非法!只能是中文最少两个字,最多不得超过5个字!");
292. return false;
293. }
294. //alert(xb.value!="男");
295. switch(xb.value){
296. case "男":break;
297. case "女":break;
298. default:alert("性别只能是\"男\"或\"女\"!"); return false;
299. }
300.
301.
302. if(!rec.exec(jg.value)){
303. alert("籍贯非法!只能是中文最少两个字,最多不得超过5个字!！");
304. return false;
305. }
306. return true;
307. }
308.
309. //-->
310. </SCRIPT>
311.
312. <input id="s" type=button value="显示学生信息" οnclick="show();">
313. <input id="que" type=button value="精确查询" οnclick="que();">
314. <input id="add" type=button value="新增" οnclick="add();">
315. <input id="can" type=button value="取消" οnclick="can();" style="visibility:hidden">
316.
317. <br>
318. <center>
319. <div id="ad" style="visibility:hidden">
320. <table><tr><td>学号:
321. <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 只能输入数字-->
322. </td><td>姓名:
323. <input type=text id="xm" size=10 maxlength=5>
324. </td><td>性别:
325. <input type=text id="xb" size=5 maxlength=5>
326. </td><td>籍贯:
327. <input type=text id="jg" size=10 maxlength=5>
328. </td>
329. </tr>
330. </table>
331. </div>
332. <div id="qmd" style="visibility:hidden">
333. <table>
334. <tr align="center">
335. <td></td>
336. <td><input id="que" type=button value="查询" οnclick="query();"></td>
337. <td><input id="mod" type=button value="修改" οnclick="mod();"></td>
338. <td><input id="del" type=button value="删除" οnclick="del();"></td>
339. </tr>
340. </table>
341. </div>
342. </center>
343. <div id="findPanel">
344. <div id="findPanelTitle">可拖动</div>
345. <div id="findPanelContent">
346. <input type="text" size="20" value="a" id="key" οnkeydοwn="javascript:ChckSubmit(event);">
347. <input type="button" value="查找" οnclick="javascript:OnKeySubmit();">
348. </div>
349. </div>
350. <script language="javascript">
351. <!--
352. var findPanel = document.getElementById("findPanel");
353. var findPanelTitle = document.getElementById("findPanelTitle");
354. var findPanelContent = document.getElementById("findPanelContent");
355. var findPanel_orgnX = 50;
356. var findPanel_orgnY = 50;
357.
358. //设置物件位置
359. findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
360. findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
361. //================================================================================
362. var foundCnt = 0; //已经找到了的结果的数量
363.
364. //查找入口函数
365. function Find(key)
366. {
367. if (key == "")
368. {
369. return;
370. }
371.
372. if (document.all)
373. {
374. IEFind(key);
375. }
376. else
377. {
378. NSFind(key);
379. }
380. }
381.
382. //浏览器为 IE 系列
383. function IEFind(key)
384. {
385. var rng = document.body.createTextRange();
386. var found = false;
387. for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++)
388. {
389. rng.moveStart("character", 1); //找到，后移一位以查找下一个
390. }
391.
392. if (found)
393. {
394. rng.moveStart("character", -1);
395. rng.findText(key);
396. rng.select();
397. rng.scrollIntoView();
398. foundCnt++;
399. }
400. else
401. {
402. if (foundCnt > 0)
403. {
404. //已经查找一遍，找到有符合条件的结果，重新开始查找
405. foundCnt = 0;
406. IEFind(key);
407. }
408. else
409. {
410. //已经查找一遍，没有找到符合条件的结果
411. alert("文档搜索完毕。");
412. }
413. }
414. }
415.
416. //浏览器为 NS 系列
417. function NSFind(key)
418. {
419. if (window.find(key))
420. {
421. foundCnt++;
422. }
423. else
424. {
425. var found = false;
426. while (window.find(key, false, true))
427. {
428. found = true;
429. }
430.
431. if (found)
432. {
433. //已经查找一遍，找到有符合条件的结果，重新查找也已经开始
434. foundCnt = 1;
435. }
436. else
437. {
438. //已经查找一遍，没有找到符合条件的结果
439. alert("文档搜索完毕。");
440. }
441. }
442. }
443.
444. function OnKeySubmit()
445. {
446. var key = document.getElementById("key");
447. Find(key.value);
448. }
449.
450. function ChckSubmit(e)
451. {
452. if (e.keyCode == 13)
453. {
454. OnKeySubmit();
455. }
456. }
457. //================================================================================
458. function RePosFindPanel()
459. {
460. findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
461. findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
462. }
463.
464. document.body.onscroll = RePosFindPanel;
465. document.body.onresize = RePosFindPanel;
466. //================================================================================
467. //拖拽过程中相关变量
468. var draging = false; //是否处于拖拽中
469. var offsetX = 0; //X方向左右偏移量
470. var offsetY = 0; //Y方向上下偏移量
471.
472. //准备拖拽
473. function BeforeDrag()
474. {
475. if (event.button != 1)
476. {
477. return;
478. }
479. offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft;
480. offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop;
481. draging = true;
482. }
483.
484. //拖拽中
485. function OnDrag()
486. {
487. if(!draging)
488. {
489. return;
490. }
491. //更新位置
492. findPanel_orgnX = event.clientX-offsetX;
493. findPanel_orgnY = event.clientY-offsetY;
494. event.returnValue = false;
495. findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;
496. findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;
497. }
498.
499. //结束拖拽
500. function EndDrag()
501. {
502. if (event.button != 1)
503. {
504. return;
505. }
506. draging = false;
507. }
508.
509. findPanelTitle.onmousedown = BeforeDrag;
510. document.onmousemove = OnDrag;
511. findPanelTitle.onmouseup = EndDrag;
512. //-->
513. </script>
514. <xml id="stu" src="stu.xml">
515. </xml>
516. <center>
517. <div id="info" style="visibility:hidden">
518. <table DATASRC=#stu border=1 style="background-color:#a9eeef; Border-color
519. :red;" >
520. <caption><h2>学生信息管理</h2></caption>
521. <thead>
522. <th>学号</th>
523. <th>姓名</th>
524. <th>性别</th>
525. <th>籍贯</th>
526. </thead>
527. <tr>
528. <td>
529. <div DATAFLD="学号">
530. </td>
531. <td>
532. <div DATAFLD="姓名">
533. </td>
534. <td>
535. <div DATAFLD="性别">
536. </td>
537. <td>
538. <div DATAFLD="籍贯">
539. </td>
540. </tr>
541. </table>
542. </div>
543.
544.
545. </center>
546. </body>
547. </html>
xml文件如下(
stu.xml)
1. <?xml version="1.0" encoding="gb2312"?>
2. <学生管理>
3. <学生>
4. <学号>97001</学号>
5. <姓名>王五</姓名>
6. <性别>男 </性别>
7. <籍贯>上海</籍贯>
8. </学生>
9. <学生>
10. <学号>97002</学号>
11. <姓名>李四 </姓名>
12. <性别>男 </性别>
13. <籍贯>浙江 </籍贯>
14. </学生>
15. <学生>
16. <学号>97006 </学号>
17. <姓名>张三 </姓名>
18. <性别>男</性别>
19. <籍贯>浙江</籍贯>
20. </学生>
21. </学生管理>