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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
KnockoutJs快速入门教程
May 16 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
幻宇的层模拟窗口效果-提供演示和下载
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
PHP 金额数字转换成英文
2010/05/06 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JS中操作JSON总结
2020/12/06 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python之列表实现栈的工作功能
2019/01/28 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
基于Python实现射击小游戏的制作
2022/04/06 Python