分享程序员开发的那些事...
更新时间：2022-05-29 14:13:40
XML（Extensible Markup Language）可扩展标记语言（可以通过这篇博客简单了解XML基础介绍），DOM（Document ObjectModel）文档对象模型（通过上篇博客了解DOM（一）——HTML DOM）。非常明显，XML DOM就是文档类型模型针对XML做的一些操作。是和HTMLDOM共同合作来完成网页数据的动态改变显示等问题！和XML DOM有很多相似的地方，但是基于XML和HTML的区别，他们的一些操作还是有很大不同的。来看一下JavaScript通过DOM对XML的操作相关知识。
DOM在XML中关于节点，属性，方法等的概念，知识都是非常相似的，这里不再赘述，这里重点通过几个实例运用一下！
我们先引进一个XML文件books.xml，以后操作都在它上进行：（注意观察XML和HTML的不同处和相同处）
[html] view plain copy print?
<span style="font-size:18px;"><?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>
</span>
一，解析XML文件，大多数浏览器都内建了读取和操作XML的解析器，通过解析器把XML转换为JavaScript可存取的对象。但是这里的以IE为内核的和FireFox或其他的浏览器是不同的，这里看个全面的加载解析XML文件的例子：（以上边books.xml进行实验）
[javascript] view plain copy print?
<span style="font-size:18px;"><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>
</span>
二，主要是对节点的各种操作了，主要就是一些属性和方法的使用，这里先看一下典型最常用的属性和方法：
|
XML DOM典型属性 |
XML DOM常见方法 |
|
一些典型的 DOM属性：
|
|
更多的详细请看，非常详细：xmldom属性与方法详解。
1，首先看一下节点的访问：可以通过三种方法（和HTML区别很大）：
通过使用 getElementsByTagName()方法
通过循环（遍历）节点树
通过利用节点的关系在节点树中导航
由于XML的内容量要比HTML文件的量小的多，可以通过b,c两种方法，HTML也可以，但是效率是非常差的（一般不用）。下边看一个循环节点树的实例：
[javascript] view plain copy print?
<span style="font-size:18px;"><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>
</span>
2，改变节点的的属性值可以通过nodeValue,setAttribute(),和HTML基本一样，比较简单。对于节点的删除，替换，创建，添加等，都是相似了，只要我们使用对应的方法或者属性即可完成，这里仅仅看了一个改变节点属性的例子：
[javascript] view plain copy print?
<span style="font-size:18px;"><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>
</span>
3，这里我单独出来谈一下节点的克隆，也就是复制节点，也就是将原有的节点进行复制，看下边这个例子：
[javascript] view plain copy print?
<span style="font-size:18px;"><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>
</span>
三，在视频中看到这样一个功能，感觉是对XML操作前非常必要的，也就是对于XML中的空行和换行的处理
：
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而Internet Explorer 不会这样。这就需要我们在操作XML时，先将其空文本去掉：
综上为XML DOM的简单理论学习，这里需要我们结合实例，来学习，多了解各种方法属性，结合HTML DOM一起学习。比较其中的同与异。当然这些都需要在用中不断发现，不断积累。
DOM是学习AJAX的非常重要的一部分，起到了异步更新网页的的主要操作功能。当然AJAX中的核心还得学习XMLHttpRequest对象，下篇将来学习XMLHttpRequest的具体使用法。这段时间AJAX的学习，对B/S的很多块内容都起到了补充的作用。本来吗，AJAX就是多种知识结合的一个新知识。继续深入学习中……
转载至：http://blog.csdn.net/liujiahan629629/article/details/17122059
本文转自 风雨萧条 博客，原文链接： http://blog.51cto.com/1095221645/1872785如需转载请自行联系原作者