XML DOM深入浅出之基础

作者：张小飞     iteye账号：z_xiaofei168          

      时间过的好快，突然发现我太长时间都没有写博客了，以往学的好多东西都快忘了，所以从今天开始，我会慢慢的开始把我个人会的，都以博客的形式写出来和大家分享。再不用技术博客记录下，就都忘了。

       前段时间用extjs写树的时候，用的是从后台返回xml字符串，拿到前台解析，前台就用到XML DOM的知识。所以今天就特意整理下这方面的内容。

       XML DOM 定义了访问和处理 XML 文档的标准方法。

       XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。
       DOM 是 W3C（万维网联盟） 的推荐标准。

 

       一、节点：根据 DOM，XML 文档中的每个成分都是一个节点。

       DOM 是这样规定的：

             1、整个文档是一个文档节点
             2、每个 XML 标签是一个元素节点
             3、包含在 XML 元素中的文本是文本节点
             4、每一个 XML 属性是一个属性节点
             5、注释属于注释节点

       文本总是存储在文本节点中，在 DOM 处理中一个普遍的错误是，认为元素节点包含文本。不过，元素节点的文本是存储在文本节点中的。例如：<year>2013</year>，元素节点 <year>，拥有一个值为 "2013" 的文本节点。"2013" 不是 <year> 元素的值！

       二、父、子和同级节点：节点树中的节点彼此之间都有等级关系。

       父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

       1、在节点树中，顶端的节点成为根节点
       2、根节点之外的每个节点都有一个父节点
       3、节点可以有任何数量的子节点
       4、叶子是没有子节点的节点
       5、同级节点是拥有相同父节点的节点

       三、XML DOM的属性和方法

       一些典型的 XML DOM 属性：

       x.nodeName - x 的名称
       x.nodeValue - x 的值
       x.parentNode - x 的父节点
       x.childNodes - x 的子节点
       x.attributes - x 的属性节点

 

       一些典型的 XML DOM 方法
       x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素
       x.appendChild(node) - 向 x 插入子节点
       x.removeChild(node) - 从 x 删除子节点 
       注释：在上面的列表中，x 是一个节点对象。

       四、XML DOM的解析

       1、加载并解析XML文件

 

/**
 * 加载XML文档
 */
function loadXMLDoc(docName) {
	try // Internet Explorer
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // 创建空的微软 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(docName); // 告知解析器加载名为 "books.xml" 的文档
		return xmlDoc;
	} catch (e) {
		alert(e.message)
	}
	return (null);
}

      公用的XML文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<books>
	<book category="WEB前端">
		<title low="extjs">EXTJS</title>
		<author>z_xiaofei168</author>
		<year>2013</year>
	</book>
	<book category="WEB前端">
		<title low="jquery">JQUERY</title>
		<author>z_xiaofei168</author>
		<year>2013</year>
	</book>
	<book category="WEB前端">
		<title low="jsf">JSF</title>
		<author>z_xiaofei168</author>
		<year>2013</year>
	</book>
</books>

      解析XML文件，这里是用jsp写的案例。

document.write("加载book.xml文件 <br />");
xmlDoc = loadXMLDoc("<%=path %>/xml/book.xml");
document.write(xmlDoc.getElementsByTagName("title")[0].nodeName+": ");
document.write(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("author")[0].nodeName+": ");
document.write(xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("year")[0].nodeName+": ");
document.write(xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue);
document.write("<br />"); 

       输出以下内容：

               加载book.xml文件
               title: EXTJS
               author: z_xiaofei168
               year: 2013

        2、加载并解析XML字符串

/**
 * 加载XML字符串
 */
function loadXMLString(text) {
	try // Internet Explorer
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // 创建空的微软 XML 文档对象
		xmlDoc.async = false; // 关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
		xmlDoc.loadXML(text); // 告知解析器加载名为 text 的字符串
	} catch (e) {
		try // Firefox, Mozilla, Opera, etc.
		{
			parser = new DOMParser(); // 创建一个空的 XML 文档对象
			xmlDoc = parser.parseFromString(text, "text/xml"); // 告知解析器加载名为text的字符串
		} catch (e) {
			alert(e.message)
		}
	}
	return xmlDoc;
}

        五、XML DOM节点信息

        节点的属性
             在 XML 文档对象模型 (DOM) 中，每个节点都是一个对象。

             对象拥有方法（功能）和属性（关于对象的信息），并可通过 JavaScript 进行访问和操作。

             三个重要的 XML DOM 节点属性是：

                nodeName
                nodeValue
                nodeType

// 获取元素的值
document.write(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue); 

      输出：EXTJS

// 更改元素的值
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue="Hello World"; 

      输出：Hello World

      

      nodeType 属性

 

元素类型	节点类型
元素ELEMENT	1
属性ATTRIBUTE	2
文本TEXT	3
CDATA_SECTION	4
实体引用ENTITY_REFERENCE	5
实体ENTITY	6
处理指令PROCESSING_INSTRUCTION	7
注释COMMENT	8
文档DOCUMENT	9
文档类型DOCUMENT_TYPE	10
文档片段DOCUMENT_FRAGMENT	11
表示法NOTATION	12

        六、XML DOM NODE LIST

        当使用诸如 childNodes 或 getElementsByTagName() 属性或方法时，会返回 NodeList 对象。odeList 对象表示节点的列表，以 XML 中的相同顺序。使用从 0 开始的下标来访问节点列表中的节点。

        具体代码附件中都有

        七、XML DOM ATTRIBUTE LIST

        元素节点的 attributes 属性返回属性节点的列表。这被称为 Named Node Map，除了方法和属性上的一些差别以为，它与节点列表相似。属性列表会保持自身的更新。如果删除或添加属性，这个列表会自动更新。

        八、XML DOM 浏览器差异

        不同的浏览器在 XML DOM 中处理空文本节点的方式是不同的。

        所有现代浏览器都支持 W3C DOM 规范。

        不过，浏览器之间是有差异的。重要的区别有两点：

             1、加载 XML 的方式

             2、处理空白和换行的方式

        XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。

       忽略节点间的空文本

       如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是 1：

 

// 节点长度[不同浏览器是不同的]
document.write("节点长度[不同浏览器是不同的]: "+x.length);
for (i=0,n=x.length;i<n;i++)
{
  if (x[i].nodeType==1) {//Process only element nodes (type 1) 
  document.write(x[i].nodeName);
  document.write("<br />");
   } 
} 

 

 

评论

4 楼 z_xiaofei168 2013-07-31  

jahu 写道

z_xiaofei168 写道

m_wen997721750 写道

不错不错，楼主很厉害，很有用

很长时间都不写了，这都是简单实用的，这是基础，基础掌握的好，才能更好的掌握复杂的

不错，，如果简单的都掌握不好，更别说复杂的了，

嗯，是的

3 楼 jahu 2013-07-30  

z_xiaofei168 写道

m_wen997721750 写道

不错不错，楼主很厉害，很有用

很长时间都不写了，这都是简单实用的，这是基础，基础掌握的好，才能更好的掌握复杂的

不错，，如果简单的都掌握不好，更别说复杂的了，

2 楼 z_xiaofei168 2013-07-30  

m_wen997721750 写道

不错不错，楼主很厉害，很有用

很长时间都不写了，这都是简单实用的，这是基础，基础掌握的好，才能更好的掌握复杂的

1 楼 m_wen997721750 2013-07-30  

不错不错，楼主很厉害，很有用