Javascript里使用Dom操作Xml


Posted in Javascript onJanuary 22, 2007

看了一天的XML资料,感觉CSDN上这篇讲的挺细致的。即有Dot Net写入XML文件的示例,又有JS读取的示例,值得一看。(Source:http://blog.csdn.net/flypigluo)

一.本笔记使用的Xml文件
二.IXMLDOMDocument/DOMDocument简介    
2.1 属性
2.1.1  parseError
2.1.2  async. 
2.1.3  xml
2.1.4  text3  

2.1.5  attributes
2.1.6  nodeName
2.1.7  documentElement
2.1.8  nextSibling
2.1.9  childNodes
2.1.10  firstChild
2.1.11  lashChild
2.2 方法
2.2.1  loadXML
2.2.2 load
2.2.3  selectSingleNode
2.2.4  selectNodes
2.2.5  getElementsByTagName
2.2.6  hasChildNodes
三.例子

一.本笔记使用的Xml文件
<?xml version="1.0"?>
<book level="1">    <Name>c++</Name> 
 <Price>20</Price>  

 <info>
       <k>1</k>
 </info>

  <info>
       <k>2</k> 
 </info>  

</book>  

在asp.net下实现代码:
string str = Server.MapPath("test1.xml"); 
XmlTextWriter xmlWriter = new XmlTextWriter(str,null); 
xmlWriter.Formatting = System.Xml.Formatting.Indented; 
xmlWriter.WriteStartDocument(); mlWriter.WriteStartElement("book"); 
xmlWriter.WriteAttributeString("level","1"); 
xmlWriter.WriteElementString("Name","c++"); 
xmlWriter.WriteElementString("Price","20"); 
xmlWriter.WriteStartElement("info"); 
xmlWriter.WriteElementString("k","1"); 
xmlWriter.WriteEndElement(); 
xmlWriter.WriteStartElement("info"); 
xmlWriter.WriteElementString("k","2"); 
xmlWriter.WriteEndElement(); 
xmlWriter.WriteEndElement(); 
xmlWriter.WriteEndDocument(); 

xmlWriter.Close();  

二.IXMLDOMDocument/DOMDocument简介
2.1 属性
2.1.1  parseError
Returns an IXMLDOMParseError object that contains information about the last parsing error
返回解析错误时的一个对象。
重要的有parseError.errorCode,parseError.reason
如果load时路径不对,会返回“系统未找到指定的对象”的错误
2.1.2  async
Specifies whether asynchronous download is permitted
是否允许异步下载,布尔值
2.1.3  xml 

Contains the XML representation of the node and all its descendants. Read-only.
该点及下面派生的所有点的全部信息,只读如果要求book点的xml,返回“<book level="1"><Name>c++</Name><Price>20</Price><info><k>1</k></info><info><k>2</k></info></book>”,如果Name的xml,返回“<Name>c++</Name>”
2.1.4  text
Represents the text content of the node or the concatenated text representing the node and its descendants. Read/write
该点及下面派生的所有点的全部节点值,可读可写
<price>20</price>
则text为20
"Name"节点的text为"c++"
2.1.5  attributes
Contains the list of attributes for this node
返回属性的集合。
2.1.6  nodeName
Returns the qualified name for attribute, document type, element, entity, or notation nodes. Returns a fixed string for all 
other node types. Read-only
该节点名称
"Name"节点的nodeName为"Name","book"节点的nodeName为"book"
2.1.7  documentElement
Contains the root element of the document
xml的根节点
上面的xml的根节点为"book"
2.1.8  nextSibling
Contains the next sibling of the node in the parent's child list. Read-only.
下一个兄弟节点,只读
2.1.9  childNodes
Contains a node list containing the child nodes
所有的子节点。
2.1.10  firstChild
Contains the first child of the node
第一个子节点
2.1.11  lastChild
Returns the last child node
最后一个子节点

2.2 方法
2.2.1  loadXML
Loads an XML document using the supplied string
2.2.2 load
Loads an XML document from the specified locati
参数的路径为服务器端的,是相对路径
2.2.3  selectSingleNode
Applies the specified pattern-matching operation to this node's context and returns the first matching node
返回第一个匹配的项
2.2.4  selectNodes
Applies the specified pattern-matching operation to this node's context and returns the list of matching nodes as IXMLDOMNodeList
符合条件的所有项。
2.2.5  getElementsByTagName
Returns a collection of elements that have the specified name
返回与元素名匹配的一个node的集合
2.2.6  hasChildNodes
Provides a fast way to determine whether a node has children
判断是否含有子节点
返回值为bool值

三.例子
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.async = false;
xmlDoc.load("test\\test1.xml");
if (xmlDoc.parseError.errorCode!=0)
{
var error = xmlDoc.parseError;
  alert(error.reason)
return;
}
var root = xmlDoc.documentElement;   //根节点
Form1.test1.value = root.xml;
/*结果如下:
<book level="1"><Name>c++</Name><Price>20</Price><info><k>1</k></info><info><k>2</k></info></book>*/
Form1.test1.value = root.nodeName; //结果为"book"
var att = root.attributes; //得到该点下所有属性的集合
var str = "";
for (var i=0; i<att.length; i++)
{
str += att.item(i).nodeName+":"+att.item(i).text;
}
Form1.test1.value = str; //只有一个属性,所以结果为“level:1”
var fNode;
var lNode;
var nextSibling;
fNode = root.firstChild;   //第一个子节点Name
lNode = root.lastChild;    //最后一个子节点 info
nextSibling = fNode.nextSibling; //第一个子节点Name的后一个兄弟节点,即Price
str = fNode.nodeName + ":" + fNode.text; //结果:"Name:c++"
str = lNode.nodeName + ":" + lNode.text; //结果为:"info:2"
str = nextSibling.nodeName + ":" + nextSibling.text; //结果为:"Price:20"
var nodeList;
str = "";
nodeList = xmlDoc.selectNodes("//info"); //查找元素名为"info"的节点
for (var j=0; j<nodeList.length; j++) //有两个info节点
{
var infoNode = nodeList.item(j);
var cldNodes = infoNode.childNodes; //info节点的子节点集
for (var k=0; k<cldNodes.length; k++)
{
       str += cldNodes.item(k).nodeName + ":" + cldNodes.item(k).text + " ";
}
//结果“k:1 k:2 ”
}
str = "";
var sNode;
sNode = xmlDoc.selectSingleNode("//info"); //找到第一个和"info"匹配的
var scldNodes = sNode.childNodes; //info节点的子节点集
for (var t=0; t<scldNodes.length; t++)
{
str += scldNodes.item(t).nodeName + ":" + scldNodes.item(t).text + " ";
}
//结果“k:1”
Form1.test1.value = str;

Javascript 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
javascript中的继承实例代码
Apr 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 #Javascript
写的htc的数据表格
Jan 20 #Javascript
共享自己写一个框架DreamScript
Jan 20 #Javascript
javascript读取RSS数据
Jan 20 #Javascript
一个多次搜索+多次传值的解决方案
Jan 20 #Javascript
短信提示使用 特效
Jan 19 #Javascript
通过JAVAScript实现页面自适应
Jan 19 #Javascript
You might like
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
微信小程序时间选择插件使用详解
2018/12/28 Javascript
js实现随机8位验证码
2020/07/24 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
Python统计单词出现的次数
2018/04/04 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Pycharm github配置实现过程图解
2020/10/13 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
最新英语专业学生求职信范文
2013/09/21 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2016公司年会主持词
2015/07/01 职场文书