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中面向对象技术的模拟
Sep 25 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php 邮件发送问题解决
2014/03/22 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
js 字符串操作函数
2009/07/25 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
jQuery实现评论模块
2020/08/19 jQuery
小程序实现tab标签页
2020/11/16 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python 如何区分return和yield
2020/09/22 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
2014年科协工作总结
2014/12/09 职场文书
施工员岗位职责
2015/02/10 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
高中化学教学反思
2016/02/22 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技