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 Archive Network 集合
May 12 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
three.js 如何制作魔方
Jul 31 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP编码转换
2012/11/05 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
对于Python中RawString的理解介绍
2016/07/07 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
一般党员对照检查材料
2014/09/24 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
实习班主任自我评价
2015/03/11 职场文书
商场营业员岗位职责
2015/04/14 职场文书
环保建议书范文
2015/09/14 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书