DOM(二)——XML DOM

原创 2013年12月04日 17:30:40

         XMLExtensible Markup Language)可扩展标记语言(可以通过这篇博客简单了解XML基础介绍),DOMDocument ObjectModel)文档对象模型(通过上篇博客了解DOM(一)——HTML DOM)。非常明显,XML DOM就是文档类型模型针对XML做的一些操作。是和HTMLDOM共同合作来完成网页数据的动态改变显示等问题!和XML DOM有很多相似的地方,但是基于XMLHTML的区别,他们的一些操作还是有很大不同的。来看一下JavaScript通过DOMXML的操作相关知识。


        DOMXML中关于节点,属性,方法等的概念,知识都是非常相似的,这里不再赘述,这里重点通过几个实例运用一下!


      我们先引进一个XML文件books.xml,以后操作都在它上进行:(注意观察XMLHTML的不同处和相同处)


<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book category="children">
  <title lang="en">Harry Potter</title> 
  <author>J K. Rowling</author> 
  <year>2005</year> 
  <price>29.99</price> 
</book>
<book category="cooking">
  <title lang="en">Everyday Italian</title> 
  <author>Giada De Laurentiis</author> 
  <year>2005</year> 
  <price>30.00</price> 
</book>
<book category="web">
  <title lang="en">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>
<book category="web">
  <title lang="en">XQuery Kick Start</title> 
  <author>James McGovern</author> 
  <author>Per Bothner</author> 
  <author>Kurt Cagle</author> 
  <author>James Linn</author> 
  <author>Vaidyanathan Nagarajan</author> 
  <year>2003</year> 
  <price>49.99</price> 
</book>
</bookstore>

    一,解析XML文件,大多数浏览器都内建了读取和操作XML的解析器,通过解析器把XML转换为JavaScript可存取的对象。但是这里的以IE为内核的和FireFox或其他的浏览器是不同的,这里看个全面的加载解析XML文件的例子:(以上边books.xml进行实验)


<html>
	<body>
		<script type="text/javascript">
			try //Internet Explorer
			  {
			          xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建IE浏览器的XML文档对象
			  }
			catch(e)
			  {
				  try //Firefox, Mozilla, Opera, etc.
				    {
				          xmlDoc=document.implementation.createDocument("","",null);//创建空的XML文档对象 
				    }
				  catch(e) {alert(e.message)}
			   }
			try 
			  {
				  xmlDoc.async=false;//关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本 
				  xmlDoc.load("/books.xml");//加载books.xml文件。注意:loadXML() 方法用于加载字符串(文本),而 load() 用于加载文件 
				  document.write("xmlDoc is loaded, ready for use");//表明创建成功
			  }
			catch(e) {alert(e.message)}//创建失败,给出信息提示
		</script>
	</body>
</html>

    二,主要是对节点的各种操作了,主要就是一些属性和方法的使用,这里先看一下典型最常用的属性和方法:

 

XML DOM典型属性

XML DOM常见方法

一些典型的 DOM属性:

  • x.nodeName - x的名称
  • x.nodeValue - x的值
  • x.parentNode - x的父节点
  • x.childNodes - x的子节点
  • x.attributes - x的属性节点
    • x.getElementsByTagName(name) -获取带有指定标签名称的所有元素
    • x.appendChild(node) - x插入子节点
    • x.removeChild(node) - x删除子节点

 

   更多的详细请看,非常详细:xmldom属性与方法详解


        1,首先看一下节点的访问:可以通过三种方法(和HTML区别很大):

  1. 通过使用 getElementsByTagName()方法
  2. 通过循环(遍历)节点树
  3. 通过利用节点的关系在节点树中导航

         由于XML的内容量要比HTML文件的量小的多,可以通过b,c两种方法,HTML也可以,但是效率是非常差的(一般不用)。下边看一个循环节点树的实例:


<html>
	<head>
	             <script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
			xmlDoc=loadXMLDoc("/example/xdom/books.xml");
			
			x=xmlDoc.documentElement.childNodes;//获得第一个book元素的子节点
			for (i=0;i<x.length;i++)//循环
			{ 
			if (x[i].nodeType==1)//检查其节点类型是否为元素节点(节点类型和HTML DOM中一样)
			  {//Process only element nodes (type 1) 
			  document.write(x[i].nodeName);//输出元素节点
			  document.write("<br />");
			  } 
			}
		</script>
	</body>
</html>

         2,改变节点的的属性值可以通过nodeValue,setAttribute(),HTML基本一样,比较简单。对于节点的删除,替换,创建,添加等,都是相似了,只要我们使用对应的方法或者属性即可完成,这里仅仅看了一个改变节点属性的例子:


<html>
	<head>
		<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
		</script>
	</head>
	<body>
	
		<script type="text/javascript">
			xmlDoc=loadXMLDoc("/example/xdom/books.xml");
			
			x=xmlDoc.getElementsByTagName("book")[0]
			y=x.getAttributeNode("category");
			y.nodeValue="child";
			
			document.write(y.nodeValue);
		</script>
		</body>
</html>

         3,这里我单独出来谈一下节点的克隆,也就是复制节点,也就是将原有的节点进行复制,看下边这个例子:


<html>
	<head>
		<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 
		</script>
	</head>
	<body>
	
		<script type="text/javascript">
			xmlDoc=loadXMLDoc("/example/xdom/books.xml");
			x=xmlDoc.getElementsByTagName('book')[0];//得到为book的第一个节点
			cloneNode=x.cloneNode(true);//克隆此节点
			xmlDoc.documentElement.appendChild(cloneNode);//将克隆好的节点添加到xml文件中
			
			//Output all titles
			y=xmlDoc.getElementsByTagName("title");
			for (i=0;i<y.length;i++)
			{
				document.write(y[i].childNodes[0].nodeValue);//循环显示title的节点
				document.write("<br />");
			}
		</script>
	</body>
</html>



    三,在视频中看到这样一个功能,感觉是对XML操作前非常必要的,也就是对于XML中的空行和换行的处理

         Firefox,以及其他一些浏览器,会把空的空白或换行作为文本节点来处理,而Internet Explorer 不会这样。这就需要我们在操作XML时,先将其空文本去掉:


         综上为XML DOM的简单理论学习,这里需要我们结合实例,来学习,多了解各种方法属性,结合HTML DOM一起学习。比较其中的同与异。当然这些都需要在用中不断发现,不断积累。


            DOM是学习AJAX的非常重要的一部分,起到了异步更新网页的的主要操作功能。当然AJAX中的核心还得学习XMLHttpRequest对象,下篇将来学习XMLHttpRequest的具体使用法。这段时间AJAX的学习,对B/S的很多块内容都起到了补充的作用。本来吗,AJAX就是多种知识结合的一个新知识。继续深入学习中……


相关文章推荐

Java——DOM方式生成XML

学完了解析XML,就该学习生成XML文件了。首先学习的是如何使用DOM方式生成XML文件。使用DOM方式生成XML文件有如下几步:首先是创建DOM树(即规定XML文件中的内容): 创建Document...

DOM解析XML-详细

一、DOM方式的解析原理 DOM模式解析XML,是把整个XML文档当成一个对象来处理,会先把整个文档读入到内存里。是基于树的结构,通常需要加载整文档和构造DOM树,然后才能开始工作。 ...
  • fznf1010
  • fznf1010
  • 2012年10月09日 22:08
  • 25353

Java DOM读写XML

2010-02-01 16:38DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准。DOM 是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找特定信息。分...
  • amaryh
  • amaryh
  • 2010年02月28日 00:12
  • 5278

JS解析XML数据,ActiveXObject("Microsoft.XMLDOM")对象兼容IE和火狐

try{  if (window.ActiveXObject !== undefined){//兼容IE,注意IE11不能再用window.ActiveXObject或者document.all判断...

Microsoft.XMLDOM组件

XMLDOM是用来访问和操作XML文档的编程接口规范。XMLDOM被设计为可用于任何语言和任何操作系统。借助DOM,程序员可以创建XML文档、遍历其结构,增、改、删其元素。DOM将整个XML文档视作一...

如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐)

在IE浏览器下,xmlDom对象一般这样被定义: var xmlDom= new ActiveXObject("Microsoft.XMLDOM");为了兼容Firefox,需要修改为: if (wi...
  • lejuo
  • lejuo
  • 2013年09月10日 16:01
  • 36384

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

利用Microsoft.XMLHTTP和Microsoft.XMLDOM实现xml文件的读取

var HTML = ""; var space = ""; var blank = ""; function getSubject() {  var xmlDoc;  if(window.Activ...

microsoft.xmldom(一) xml文档遍历js

xml: 首都图书馆 朝阳区华威桥南      0000       0001   Xml初学   人民出版社   2010-05-0-18   100.54       0002   XSD定义  ...

Microsoft XMLDom读取数据原来默认是异步的!

今天做一很简单的功能,就是将xml数据用xsl转换一下而已。以前一直都没注意xmldom获取数据默认是异步的方式的。每次都是load完xml数据以后就直接调用transfer了。之前因为一直都是在本地...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM(二)——XML DOM
举报原因:
原因补充:

(最多只允许输入30个字)