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 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 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
thinkphp实现附件上传功能
2017/05/26 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
js charAt的使用示例
2014/02/18 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
python实现rest请求api示例
2014/04/22 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python 日志 logging模块详细解析
2020/03/31 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
初中科学教学反思
2014/01/21 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
法制宣传月活动总结
2014/04/29 职场文书
大学生应聘求职信
2014/05/26 职场文书
司法局火灾防控方案
2014/06/05 职场文书
英语教师求职信
2014/06/16 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python